[jQuery] select 선택 값 가져오고 변경하기, option 추가하고 확인하기

아래 소스코드는 select 박스를 다루고 관련 이벤트를 처리하는 예제입니다. select 박스 선택한 값과 text에 대해서 확인하고, 버튼을 통해서 select 박스의 값을 변경하고, 또 버튼을 통해서 모든 option 값을 노출시키고 있으며 input 창을 통해 새로운 option을 생성하고 select 박스에 추가하고 있습니다.

 

 

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  // Select 박스 변경 이벤트 처리
  $('#fruitSelect').change(function() {
    var selectedFruitValue = $(this).val();
    var selectedFruitText = $(this).find('option:selected').text();

    $('#selectedFruit').text('선택한 과일: ' + selectedFruitText);
    $('#selectedFruitValue').text('선택한 과일 값: ' + selectedFruitValue);
  });

  // 선택한 과일 변경 버튼 이벤트 처리
  $('#changeFruitButton').click(function() {
    // 원하는 과일의 값을 설정
    var newFruitValue = 'banana';
    // Select 박스의 값을 변경
    $('#fruitSelect').val(newFruitValue).trigger('change');
  });

  // 모든 옵션 가져오는 버튼 이벤트 처리
  $('#getOptionsButton').click(function() {
    var allOptions = [];
    $('#fruitSelect option').each(function() {
      allOptions.push($(this).val() + ' - ' + $(this).text());
    });
    $('#allOptions').empty().append($.map(allOptions, function(option) {
      return $('<li>').text(option);
    }));
  });

  // 옵션 추가 버튼 이벤트 처리
  $('#addOptionButton').click(function() {
    var newOptionText = $('#newOptionText').val();
    var newOptionValue = $('#newOptionValue').val();

    // 새로운 옵션을 생성하여 Select 박스에 추가
    $('#fruitSelect').append($('<option>', {
      value: newOptionValue,
      text: newOptionText
    }));

    // 입력 필드 초기화
    $('#newOptionText').val('');
    $('#newOptionValue').val('');
  });
});
</script>

<p>
<!-- 선택한 과일 변경 버튼 -->
<button id="changeFruitButton">과일 변경 (바나나)</button>

<!-- 모든 옵션 값 가져오는 버튼 -->
<button id="getOptionsButton">모든 옵션 가져오기</button>
</p>

<h3>모든 옵션 값</h3>
<ul id="allOptions"></ul>

<h3>선택한 과일</h3>
<p id="selectedFruit"></p>
<p id="selectedFruitValue"></p>

<h3>Select 박스</h3>
<p>
<button id="addOptionButton">옵션 추가</button>
<input type="text" id="newOptionText" placeholder="새로운 옵션 텍스트">
<input type="text" id="newOptionValue" placeholder="새로운 옵션 값">
</p>

<select id="fruitSelect">
<option value="">선택</option>
<option value="apple">사과</option>
<option value="banana">바나나</option>
<option value="cherry">체리</option>
<option value="grape">포도</option>
<option value="orange">오렌지</option>
</select>

 

1. 과일 변경 버튼

- select 박스의 값을 banana로 변경하고, 변경된 값을 trigger('change') 메서드를 통해 변경 이벤트를 강제로 발생시켜서 "선택한 과일" 및 "선택한 과일 값"을 업데이트합니다.

2. 모든 옵션 가져오기 버튼

- select 박스의 모든 옵션 값을 가져와서 "allOptions" <ul> 요소에 나열합니다.

3. 옵션 추가 버튼

- 사용자가 입력한 새로운 옵션 텍스트와 값으로 새로운 옵션을 동적으로 생성하고 select 박스에 추가합니다. 그 후, 입력 필드는 초기화됩니다.

 

 

소스코드 화면

 

 

선택한 과일, 모든 옵션 가져오기

 

 

selectbox 값 변경하기 (과일변경)

 

 

selectbox option 추가하기