제이쿼리로 첫번째 select 태그가 선택 될때마다 아래의 select option 태그 변경하기

jQuery를 사용하여 첫 번째 <select> 태그가 선택될 때마다 아래의 두 번째 <select> 태그의 <option> 태그를 변경하는 방법을 보여드리겠습니다. 이를 위해 change 이벤트를 사용할 수 있습니다.

$(document).ready(function() {
  // 첫 번째 select 태그의 변경 이벤트 리스너
  $('#firstSelect').on('change', function() {
    // 선택된 값을 가져옴
    const selectedValue = $(this).val();

    // 두 번째 select 태그의 option을 변경
    $('#secondSelect').empty(); // 기존 option 제거

    if (selectedValue === 'option1') {
      $('#secondSelect').append('<option value="option1_value1">Option 1 - Value 1</option>');
      $('#secondSelect').append('<option value="option1_value2">Option 1 - Value 2</option>');
    } else if (selectedValue === 'option2') {
      $('#secondSelect').append('<option value="option2_value1">Option 2 - Value 1</option>');
      $('#secondSelect').append('<option value="option2_value2">Option 2 - Value 2</option>');
    } else if (selectedValue === 'option3') {
      $('#secondSelect').append('<option value="option3_value1">Option 3 - Value 1</option>');
      $('#secondSelect').append('<option value="option3_value2">Option 3 - Value 2</option>');
    } else {
      $('#secondSelect').append('<option value="default">Select an option</option>');
    }
  });
});​

<select id="firstSelect">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

<select id="secondSelect">
  <option value="default">Select an option</option>
</select>

이 예제에서는 첫 번째 <select> 태그의 값에 따라 두 번째 <select> 태그의 <option> 태그를 동적으로 변경합니다. 선택된 값에 따라 적절한 옵션을 두 번째 <select> 태그에 추가하거나 제거합니다.