JQuery ile <select> seçeneklerini nasıl değiştirebilirim?

Bir seçenek listesinin mevcut olduğunu varsayalım <select>, yeni <option>s ile nasıl güncellersiniz ?

emptyYöntemi kullanarak mevcut seçenekleri kaldırabilir ve ardından yeni seçeneklerinizi ekleyebilirsiniz:

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

Bir nesnede yeni seçenekleriniz varsa şunları yapabilirsiniz:

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

Düzenleme: Birincisi hariç tüm seçenekleri kaldırmak için , dizini sıfırdan büyük olan :gttüm optionöğeleri ve removebunları almak için seçiciyi kullanabilirsiniz :

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

Hızlı bir jQuery uzantısına CMS mükemmel cevap attı:

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

"Metin" ve "değer" anahtarları içeren bir nesne dizisi bekler. Yani kullanım aşağıdaki gibidir:

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

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

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

burada comboBx birleşik giriş kimliğinizdir.

ya da zaten mevcut innerHTML'ye dize olarak seçenekler ekleyebilir ve daha sonra select innerHTML'ye atayabilirsiniz.

Düzenle

İlk seçeneği tutmanız ve diğer tüm seçenekleri kaldırmanız gerekiyorsa,

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

Garip bir nedenden dolayı bu kısım

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

CMS çözümü benim için çalışmadı, bunun yerine bunu basitçe kullandım

el.html(' ');

Ve işe yarıyor. Bu yüzden çalışma kodum şimdi şöyle görünüyor:

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 öğesini kaldırmak ve eklemek, mevcut öğenin değiştirilmesinden daha yavaştır.

Seçenek kümeleriniz aynı uzunlukta ise, böyle bir şey yapabilirsiniz:

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

Yeni seçenek kümenizin uzunluğu farklıysa, yukarıda açıklanan bazı teknikleri kullanarak gerçekten ihtiyacınız olan boş seçenekleri silebilir / ekleyebilirsiniz.

Örneğin, html kodunuz bu kodu içeriyorsa:

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

Seçiminizdeki seçenek listesini değiştirmek için aşağıdaki kodu kullanabilirsiniz. adınız seçili selectId adını seçtiğinizde .

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

yukarıdaki bu örnekte eski seçenek listesini yalnızca bir yeni seçenekle değiştiriyorum.

Bu yardımcı olur mu?

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

Eski şeyleri elle yapmak benim için her zaman iyi olmuştur.

1. Seçimi temizleyin ve ilk seçeneği bırakın:

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

2. Verileriniz bir Json'dan veya herhangi bir şeyden geliyorsa (yalnızca verileri kapatınız):

       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'im:

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

Bu çözüm, Ajax ile çalışmak ve Json'da bir veritabanından yanıtlar için idealdir.

<select>sürekli olarak güncellersek ve önceki değeri kaydetmemiz gerekiyorsa:

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