jQuery <select>의 <option>변경하기 + 멀티 콤보박스(Multi-Select Combo box)

보통 웹에서 2개 이상의 <select> (드롭다운 박스)을 사용해서, 다른 하나의 <select>의 <option>에 대해서 변경이 필요한 경우가 생깁니다.

 

해당 부분의 방법을 처리를 위해서 jQuery에서 다음과 같이 사용하면 됩니다.

 

SYNTAX

$('#아이디').html('<option>New</option>'); // 다름과 같이 사용하면, 새로운 값으로 replace됩니다.

 

 

여러개의 <option>을 넣는 예제

<select id='needSelect'>
  <option>O1</option>
  <option>O1</option>
</select>

$newoptions = "<option>NewO1</option>
               <option>NewO1</option>";

$('select#needSelect').html($newoptions);

여기서 셀럭터를 아이디값만 사용해서 $('#needSelect').html($newoptions); 이렇게 해도 됩니다.

참고: Jquery Replace Select Options

 

 

또다른 방법은 (추천하는 방법은 아님) 

참고: How to change options of <select> with jQuery?

 

You can remove the existing options by using the empty method, and then add your new options:

var option = $('<option></option>').attr("value", "option value").text("Text");
$("#selectId").empty().append(option);

If you have your new options in an object you can:

var newOptions = {"Option 1": "value1",
  "Option 2": "value2",
  "Option 3": "value3"
};

var $el = $("#selectId");
$el.empty(); // remove old options
$.each(newOptions, function(key,value) {
  $el.append($("<option></option>")
     .attr("value", value).text(key));
});

Edit: For removing the all the options but the first, you can use the :gt selector, to get all the option elements with index greater than zero and remove them:

$('#selectId option:gt(0)').remove(); // remove all options, but not the first 

 

삭제하기

$('#selectId option:gt(0)').remove();

 

 

[추가 사항] Multi-Select Combo box (왼쪽,오른쪽 이동하는 셀렉트 박스)

웹 프로그램 관리자 모드에서 자주 사용하는 멀티셀렉트 콤보 박스입니다. 

Multi-select Combo Box

WebSite / Demo / GitHub

 

참고: https://www.sitepoint.com/13-jquery-selectboxdrop-down-plugins/