jquery html-select

Как изменить опции для <select> с помощью jQuery?

Предположим, список опций доступен, как обновить <select> с новыми тэгами <option>?

258
9
9 ответов

Вы можете удалить существующие опции, используя метод 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, чтобы получить все элементы опций с индексом больше нуля и удалить их:

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

Решил быстро попробовать сделать расширение для 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);

Он ожидает получить как входной параметр массив объектов, которые содержат ключи "text" и "value". Так, можете использовать этот способ:

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

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

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

Где comboBx - ваш идентификатор комбо-бокса.

Или вы можете добавить опции в виде строки к уже существующему innerHTML и затем назначить выбранному 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');
});

В случае, если ваш новый набор опций имеет разную длину, вы можете удалить/дополнить пустые опции, которые вам действительно нужны, используя код из ответов выше.

Старая школа делать вещи вручную всегда была хороша для меня.

  1. Очистите выбор и оставьте первый вариант:

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

  1. Если ваши данные поступают от JSON или откуда-то ещё (просто сделайте конкатенацию данных):

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

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

  1. Мой JSON:

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

Это решение идеально подходит для работы с Ajax.

Если, например, ваш html-код выглядит так:

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

Для того, чтобы изменить список опций внутри вашего селекта, вы можете использовать код ниже. когда имя (id) Вашего селекта selectId.

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

В этом примере я изменяю старый список опций только на один новый.

Этот код может помочь

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

если мы часто обновляем <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');