Select下拉列表框(添加、删除option)

最新推荐文章于 2023-11-07 16:31:26 发布

魔拉宝

最新推荐文章于 2023-11-07 16:31:26 发布

阅读量1.6k

点赞数

分类专栏：特效代码文章标签： action

特效代码专栏收录该内容

109 篇文章 1 订阅

订阅专栏

这是一个实现Select下拉列表框(添加、删除option) 的实例代码，新手朋友可以学习一下，

<select id=/"s1/" size=/"5/" multiple=/"multiple/">
    <option value=/"11111/">11111</option>
    <option value=/"22222/">22222</option>
    <option value=/"33333/">33333</option>
    <option value=/"44444/">44444</option>
    <option value=/"55555/">55555</option>
</select>

<select id=/"s2/" size=/"5/" multiple=/"multiple/">
</select>

<br /><br />
<input type=/"button/" value=/"添加/" οnclick=/"AddOrRomove(’add’);/" />
<input type=/"button/" value=/"删除/" οnclick=/"AddOrRomove(’remove’);/" />

<script language=/"javascript/" type=/"text/javascript/">
function AddOrRomove(action)
{
    var s1 = document.getElementById(/"s1/");
    var s2 = document.getElementById(/"s2/");
    var optionArray = new Array();

    if (action == /"add/") //添加
    {
        for (var i=0;i<s1.options.length;i++)
        {
            if (s1.options[i].selected == true)
            {optionArray.push(s1.options[i]);}
        }

        for (var j in optionArray)
        {
            optionArray[j].selected = false;
            s2.options.appendChild(optionArray[j]);
        }
    }
    else if (action == /"remove/") //删除
    {
        for (var i=0;i<s2.options.length;i++) [Page]
        {
            if (s2.options[i].selected == true)
            {optionArray.push(s2.options[i]);}
        }

        for (var j in optionArray)
        {
            optionArray[j].selected = false;
            s1.options.appendChild(optionArray[j]);
        }
    }
}
</script>