首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >更改选择列表的选项数组

更改选择列表的选项数组
EN

Stack Overflow用户
提问于 2011-06-16 05:40:55
回答 5查看 64.4K关注 0票数 29

有没有办法使用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);
}
EN

回答 5

Stack Overflow用户

回答已采纳

发布于 2011-06-16 05:49:51

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'));
});
票数 18
EN

Stack Overflow用户

发布于 2011-06-16 06:02:53

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

票数 16
EN

Stack Overflow用户

发布于 2011-06-16 06:23:37

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

$("#test").html(newOptionsHtml);
票数 12
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/6364748

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档