jQuery로
도움이 되었습니까?

해결책

사용하여 기존 옵션을 제거 할 수 있습니다 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>

SELECT 내부의 옵션 목록을 변경하려면이 코드를 사용할 수 있습니다. 당신의 이름을 선택할 때 selectId. 

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

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

손으로 일을하는 구식 학교는 항상 나에게 좋았습니다.

  1. 선택을 청소하고 첫 번째 옵션을 남겨주세요.

        $('#your_select_id').find('option').remove()
    .end().append('<option value="0">Selec...</option>')
    .val('whatever');

  2. 데이터가 JSON 또는 무엇이든 나오는 경우 (데이터를 고용하는 경우) :

        var JSONObject = JSON.parse(data);
    newOptionsSelect = '';
    for (var key in JSONObject) {
        if (JSONObject.hasOwnProperty(key)) {
            var newOptionsSelect = newOptionsSelect + '<option value="'+JSONObject[key]["value"]+'">'+JSONObject[key]["text"]+'</option>';
        }
    }

    $('#your_select_id').append( newOptionsSelect );

  3. 내 json objetc :

        [{"value":1,"text":"Text 1"},{"value":2,"text":"Text 2"},{"value":3,"text":"Text 3"}]

이 솔루션은 AJAX와 함께 작업하고 데이터베이스의 JSON에서 답변하는 데 이상적입니다.

업데이트하면 <select> 지속적으로 우리는 이전 가치를 절약해야합니다.

var newOptions = {
    'Option 1':'value-1',
    'Option 2':'value-2'
};

var $el = $('#select');
var prevValue = $el.val();
$el.empty();
$.each(newOptions, function(key, value) {
   $el.append($('<option></option>').attr('value', value).text(key));
   if (value === prevValue){
       $el.val(value);
   }
});
$el.trigger('change');

이것이 도움이됩니까?

$("#SelectName option[value='theValueOfOption']")[0].selected = true;
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top