Як змінити параметри <select> за допомогою jQuery?

Припустимо, доступний перелік варіантів, як оновити <select>нову <option>s?

Ви можете видалити існуючі параметри за допомогою 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 

Я кинув чудову відповідь 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 - ваш ідентифікатор комбо-коду.

або ви можете додати параметри як рядок до вже наявного внутрішнього HTMLML і потім призначити вибраному 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>

Для того, щоб змінити список опцій всередині вашого вибору, ви можете використовувати цей код нижче. коли ваше ім'я вибирається з ім'ям selectId .

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

у цьому прикладі вище я змінюю старий список параметрів лише однією новою опцією.

Чи допомагає це?

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

Стара школа займатися руками завжди була для мене хорошою.

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