更改选择列表的选项数组答案

【问题标题】：Change the options array of a select list更改选择列表的选项数组
【发布时间】：2011-06-15 21:40:54
【问题描述】：

有没有办法使用 javascript 或 mootools 更改 html 选择列表的选项数组？

我需要用一个新选项替换整个选项集。在我的 ajax 响应中，我收到一个用新 HTML 选项填充的数组，因此我尝试清空旧列表并添加新值，如下所示

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

上面的代码在循环内的行上给了我一个未捕获的异常。

未捕获的异常：[异常...“意外错误”nsresult：“0x8000ffff（NS_ERROR_UNEXPECTED）”位置：“JS框架

只是添加对我有用的内容：

/* 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);
}

【问题讨论】：

标签： javascript html mootools

【解决方案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'));
});

【讨论】：

$each(new_options... 有一个错字。应该是$.each，而不是$each。
@Kevin - 这是给 Mootools 的，不是 jQuery，所以它是$each。

【解决方案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);
    }
})

Demo

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

在选择对象上使用remove 和add 操作DOM。您可以查看http://www.w3schools.com/jsref/dom_obj_select.asp 了解更多信息。

为了向某些选择元素添加新选项，我编写了以下代码：

/**
    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;
}

【讨论】：