[jquery] jQuery로 <select>의 옵션을 변경하는 방법은 무엇입니까?

옵션 목록을 사용할 수 있다고 가정하면 <select>새로운 옵션으로 어떻게 업데이트 <option>합니까?

답변

empty방법 을 사용하여 기존 옵션을 제거한 다음 새 옵션을 추가 할 수 있습니다.

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

객체에 새로운 옵션이있는 경우 다음을 수행 할 수 있습니다.

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));
});

편집 : 첫 번째 옵션을 제외한 모든 옵션을 제거하려면 :gt선택기를 사용하여 option인덱스가 0보다 큰 모든 요소 를 가져올 수 remove있습니다.

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

답변

CMS의 뛰어난 답변을 빠른 jQuery 확장에 던져 넣었습니다.

(function($, window) {
  $.fn.replaceOptions = function(options) {
    var self, $option;

    this.empty();
    self = this;

    $.each(options, function(index, option) {
      $option = $("<option></option>")
        .attr("value", option.value)
        .text(option.text);
      self.append($option);
    });
  };
})(jQuery, window);

“텍스트”및 “값”키를 포함하는 객체 배열이 필요합니다. 따라서 사용법은 다음과 같습니다.

var options = [
  {text: "one", value: 1},
  {text: "two", value: 2}
];

$("#foo").replaceOptions(options);

답변

$('#comboBx').append($("<option></option>").attr("value",key).text(value));

여기서 comboBx는 콤보 상자 ID입니다.

또는 기존의 innerHTML에 문자열로 옵션을 추가 한 다음 select innerHTML에 할당 할 수 있습니다.

편집하다

첫 번째 옵션을 유지하고 다른 모든 옵션을 제거 해야하는 경우 사용할 수 있습니다

var firstOption = $("#cmb1 option:first-child");
$("#cmb1").empty().append(firstOption);

답변

이상한 이유로이 부분

$el.empty(); // remove old options

CMS 솔루션에서 나에게 효과가 없었으므로 대신 이것을 사용했습니다.

el.html(' ');

그리고 그것은 작동합니다. 따라서 내 작업 코드는 이제 다음과 같습니다.

var newOptions = {
    "Option 1":"option-1",
    "Option 2":"option-2"
};

var $el = $('.selectClass');
$el.html(' ');
$.each(newOptions, function(key, value) {
    $el.append($("<option></option>")
    .attr("value", value).text(key));
});

답변

DOM 요소를 제거하고 추가하는 것이 기존 요소를 수정하는 것보다 느립니다.

옵션 세트의 길이가 같은 경우 다음과 같이 할 수 있습니다.

$('#my-select option')
.each(function(index) {
    $(this).text('someNewText').val('someNewValue');
});

새 옵션 세트의 길이가 다른 경우 위에서 설명한 일부 기술을 사용하여 실제로 필요한 빈 옵션을 삭제 / 추가 할 수 있습니다.

답변

예를 들어 html 코드에 다음 코드가 포함 된 경우 :

<select id="selectId"><option>Test1</option><option>Test2</option></select>

선택 항목 내에서 옵션 목록을 변경하려면 다음 코드를 사용하십시오. 때 이름이 이름을 선택 selectId을 .

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

위의 예제에서 하나의 새 옵션으로 이전 옵션 목록을 변경합니다 .

답변

도움이 되나요?

$("#SelectName option[value='theValueOfOption']")[0].selected = true;