Как обновить <select>опции в моем случае?

Question

У меня есть поле выбора и кнопка:

<select id="mylist"></select>
<input type="button" id="btn" value="update">

мой код js:

var btn=$('#btn');
btn.click(function(){
   var optionList = GET_LIST();// GET_LIST() returns a array of strings which is the option texts.

   //How to use optionList to update the options in <select> ?
});

Как обновить список параметров с помощью optionList в теге выбора?

Answer 1

РЕДАКТИРОВАТЬ: На основе примечания от альтернативы @amsutil с использованием HTML:

var btn=$('#btn');
btn.click(function(){
     var optionList = GET_LIST();
     var select  = $("#mylist");
     select.html("");
     var optionsHTML = "";
     $.each(optionList, function(a, b){
        optionsHTML += "<option>" + b + "</option>";
     });
     select.html(optionsHTML);
});

Попробуйте это:

var btn=$('#btn');
btn.click(function(){
     var optionList = GET_LIST();
     var select  = $("#mylist");
      select.empty();
     $.each(optionList, function(a, b){
        select.append("<option>" + b + "</option>");
     });
});

Answer 2

Я вижу несколько ответов с использованием 'append', но это создает слишком много манипуляций с DOM. Если в вашем массиве много значений, это может замедлить работу сайта. Гораздо лучше хранить все новые параметры в строке и выполнять одну манипуляцию с DOM в конце.

Демо: http://jsbin.com/ubotu4/

Answer 3

Если вы хотите создать опции выбора из массива, ваши значения и текст метки будут совпадать. Они должны храниться в объекте, если вы хотите, чтобы значения и текст были другими:

var btn = $('#btn');

btn.click(function() {
    var optionList = GET_LIST();
    var element = $('#mylist');

    $.each(optionList, function(index, value) {
       element.append('<option value="' + value + '">' + value + '</option>');
    });
});

Answer 4

Использование $.map() для преобразования массива строк в массив элементов option:

var optionList = GET_LIST();
var options = $.map(optionList, function (item, i) {
    return $('<option>', {text: item});   // Convert string into <option>
});
$('#mylist').empty().append(options);     // Append to the <select>