كيفية تغيير خيارات <select> باستخدام jQuery؟

Question

لنفترض أن قائمة الخيارات متاحة، كيف يمكنك تحديث <select> مع الجديد <option>س؟

Answer 1

ويمكنك إزالة الخيارات الموجودة باستخدام 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 مع مؤشر أكبر من الصفر و remove منهم:

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

Answer 2

وأنا ألقى الجواب CMS الممتازة إلى تمديد مسج سريع:

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

Answer 3

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

حيث comboBx هو معرف مربع التحرير والسرد الخاص بك.

أو يمكنك إلحاق الخيارات كسلسلة إلى لغة HTML الداخلية الموجودة بالفعل ثم تعيينها إلى لغة HTML الداخلية المحددة.

يحرر

إذا كنت بحاجة إلى الاحتفاظ بالخيار الأول وإزالة جميع الخيارات الأخرى، فيمكنك استخدامه

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

Answer 4

لسبب غريب هذا الجزء

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

Answer 5

وإزالة وإضافة عنصر DOM أبطأ من تعديل القائمة واحدة.

إذا مجموعات ديك الخيار لها نفس الطول، يمكنك فعل شيء من هذا القبيل:

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

في حالة الجديد مجموعة خيار لها طول مختلف، يمكنك حذف / إضافة خيارات فارغة تحتاج حقا، وذلك باستخدام بعض التقنيات المذكورة أعلاه.

Answer 6

على سبيل المثال، إذا كان كود html الخاص بك يحتوي على هذا الكود:

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

من أجل تغيير قائمة الخيارات داخل التحديد الخاص بك، يمكنك استخدام هذا الرمز أدناه.عندما تختار اسمك اسمه معرف_تحديد.

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

في هذا المثال أعلاه قمت بتغيير القائمة القديمة لـ خيار من خلال خيار واحد جديد فقط.

Answer 7

لقد كانت المدرسة القديمة لفعل الأشياء يدويًا أمرًا جيدًا بالنسبة لي دائمًا.

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 الخاص بي:

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

يعد هذا الحل مثاليًا للعمل مع Ajax، والإجابات بتنسيق Json من قاعدة البيانات.

Answer 8

وإذا قمنا بتحديث <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');

Answer 9

هل هذه المساعدة؟

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