Как изменить параметры <select> с помощью jQuery?


Ответы:


600

Вы можете удалить существующие параметры, используя 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 

2
Как остаться первым вариантом при пустом ()?
Маска

2
При использовании самозагрузки-выберите затем добавить следующее , чтобы обновить выбери сборщик после замены опции: $('#selectId').selectpicker('refresh'); $('#selectId').selectpicker('render');. В противном случае новые параметры не будут отображаться в вашем списке выбора.
тел.

Как я могу проверить один из этих вариантов?
Дарос

Лично я нахожу этот синтаксис немного более чистым для создания узла jQuery$el.append($('<option/>', { value: value, text: key }));
rorofromfrance

Спасибо, парни. если вам нужно установить выбранное значение, когда мы редактируем страницу для выбранного значения по умолчанию, мы можем использовать что-то подобное в цикле для конкретной итерации, мы можем добавить selected $ el.append ($ ('<option />', {value) : значение, выбранное: «выбрано», текст: ключ}));
Разработчик

79

Я бросил отличный ответ 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);

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

где comboBx - ваш идентификатор поля со списком.

или вы можете добавить опции в виде строки к уже существующему innerHTML, а затем назначить их select innerHTML.

редактировать

Если вам нужно сохранить первый вариант и удалить все остальные, вы можете использовать

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

Вы не удалили старые опции?
Маска

Вы хотите очистить старые или просто добавить новые опции к существующим?
Рахул

5

По какой-то странной причине эта часть

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

3

Удаление и добавление элемента DOM выполняется медленнее, чем изменение существующего.

Если ваши наборы параметров имеют одинаковую длину, вы можете сделать что-то вроде этого:

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

Если ваш новый набор параметров имеет другую длину, вы можете удалить / добавить пустые параметры, которые вам действительно нужны, с помощью некоторой техники, описанной выше.


1

Если, например, ваш 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);

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


1
Почему ОП должен попробовать это? Пожалуйста, добавьте объяснение того, что вы сделали и почему вы сделали это не только для ФП, но и для будущих посетителей SO.
Джей Бланшар

1

Это помогает?

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

3
Этот вопрос касается динамического добавления <option> в <select>, а не выбора конкретного параметра.
sisve

1

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

  1. Уберите выделение и оставьте первый вариант:

        $('#your_select_id').find('option').remove()
        .end().append('<option value="0">Selec...</option>')
        .val('whatever');
  2. Если ваши данные поступают из Json или чего-либо еще (просто Concat данных):

        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 из базы данных.


0

если мы обновляем <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');
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.