Изменить массив параметров списка выбора

Question

Есть ли способ изменить массив опций списка выбора html, используя javascript или mootools?

Мне нужно заменить весь набор параметров на новый.В своем ответе на ajax я получаю массив, заполненный новыми параметрами HTML, поэтому я пытаюсь очистить старый список и добавить новые значения следующим образом

$('element').options.length=0;
for (i=0; i<newSet.length; i++)
{
    $('element').options[i]=newSet[i];
}

Приведенный выше код дает мне необработанное исключение длястрока внутри цикла.

необработанное исключение: [Исключение ... "Неожиданная ошибка" nsresult: "0x8000ffff (NS_ERROR_UNEXPECTED)" location: "JS frame

Просто чтобы добавить то, что у меня сработало:

/* get new options from json*/
var new_options = response.options;

/* Remove all options from the select list */
$('idresource').empty();
/* Insert the new ones from the array above */
for (var key in new_options)
{
var opt = document.createElement('option');
    opt.text = new_options[key];
    opt.value = key;
    $('idresource').add(opt, null);
}

Answer 1

var new_options = ['Option 1', 'Option 2', 'Option 3'];

/* Remove all options from the select list */
$('yourSelectList').empty();

/* Insert the new ones from the array above */
$each(new_options, function(value) {
    new Element('option')
        .set('text', value)
        .inject($('yourSelectList'));
});

Answer 2

HTML

<select class="element">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

<button><<<</button>

<select class="newSel">
    <option value="11">NewOne</option>
    <option value="22">NewTwo</option>
    <option value="33">NewThree</option>
</select>

Javascript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

$("button").click(function(){
    var oldSel = $('.element').get(0);

    while (oldSel.options.length > 0) {
        oldSel.remove(oldSel.options.length - 1);
    }

    var newSel = $('.newSel').get(0);

    for (i = 0; i < newSel.length; i++)
    {
        var opt = document.createElement('option');

        opt.text = newSel.options[i].text;
        opt.value = newSel.options[i].value;

        oldSel.add(opt, null);
    }
})

Демо

Answer 3

var newOptionsHtml = "<option value='2'>New Option 1</option><option value='3'>New Option 2</option>";

$("#test").html(newOptionsHtml);

Answer 4

Управляйте DOM, используя remove и add на выбранном объекте.Вы можете увидеть http://www.w3schools.com/jsref/dom_obj_select.asp для получения дополнительной информации.

Для добавления новых опций в какой-то элемент select, я написал следующий код:

/**
    Adds an option to a select(HTML) element.
    @param {HTMLElement} select_element The select eletement.
    @param {string} option_str The text of the option.
    @param {Object} [option_attr] The options to be copied into the option element created.
    @returns {HTMLElement} The option element created.
*/
function addOptionStrToSelectElement(select_element, option_str, option_attr){
    if (!option_attr) option_attr = {};
    var doc = select_element.ownerDocument;
    var opt = doc.createElement("option");
    opt.text = option_str;
    for (var prop in option_attr){
        if (option_attr.hasOwnProperty(prop)){
            opt[prop] = option_attr[prop];
        }
    }
    doc = null;
    if (select_element.add.length === 2){
        select_element.add(opt, null); // standards compliant
    } else{
        select_element.add(opt); // IE only
    }
    return opt;
}

Answer 5

Решение Vanilla JS

var arrOptions = [];
arrOptions.push("<option value='' selected>Select from List...</option>");
arrOptions.push("<option value='Trust Deposit'>Trust Deposit</option>");
arrOptions.push("<option value='Operating Deposit'>Operating Deposit</option>");

document.getElementById("selectInput").innerHTML = arrOptions.join();

Если у вас уже есть набор опций

var arrOptions = [];
var arrOptionsCollection = document.getElementById("check_typeInput").options;
for (var i=0, n = arrOptionsCollection.length; i < n; i++) { // looping over the options
    if (arrOptionsCollection[i].value) {
        arrOptions.push("<option value='" + arrOptionsCollection[i].value + "'>" + arrOptionsCollection[i].text + "</option>");
    }
}
arrOptions.push("<option value='Trust Deposit'>Trust Deposit</option>");
arrOptions.push("<option value='Operating Deposit'>Operating Deposit</option>");

document.getElementById("selectInput").innerHTML = arrOptions.join();