firefox下对select增加option节点-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_7451/article/details/81819858

本文介绍了一种在不同浏览器（如IE和Firefox）间实现select元素选项动态迁移的方法，并提供了具体的JavaScript代码实现。通过该方法可以在两个select框之间移动选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

IE下面很好写，firefox下试了几种写法都不行，比如
var oOption = document.createElement("OPTION");
oOption.setAttribute("text",fromObj.options[sIndex].text);
oOption.setAttribute("value",fromObj.options[sIndex].value);
selectObj.add(oOption);
或者
selectObj.options.add(oOption);
最后终于找出来了，要这么写
myOption=document.getElementsByTagName('select')[0];
myOption.options[myOption.options.length]=new Option('newText','newValue');

想在两个select之间倒option，全部代码如下：

<script type="text/javascript">
    function move(from){
        var fromObj,toObj;
        if(from == "toRight"){
            fromObj = document.getElementsByName("leftSelect")[0];
            toObj = document.getElementsByName("rightSelect")[0];
        }else{
            fromObj = document.getElementsByName("rightSelect")[0];
            toObj = document.getElementsByName("leftSelect")[0];
        }

        var sIndex = fromObj.selectedIndex;
        if(sIndex < 0){alert("请选择符合性要求!");return;};
        toObj.options[toObj.options.length]=new Option(fromObj.options[sIndex].text,fromObj.options[sIndex].value);
        fromObj.remove(sIndex);
    }
</script>

<body>
<table>
<tr>
    <td>
        <select name="leftSelect" size="10">
            <option value="1">COSO</option>
            <option value="2">Cobit</option>
            <option value="3">ITIL/ISO20000</option>
            <option value="4">CMMI</option>
            <option value="5">PRINCE2</option>
            <option value="6">银监会313号文</option>
        </select>
    </td>

    <td>
        <input value=">" type="button" onclick="move('toRight')"><br/>
        <input value="<" type="button" onclick="move('toLeft')">
    </td>
    <td>
        <select name="rightSelect" size="10">
            <option value="7">等级保护</option>
            <option value="8">BS7799/ISO27000</option>
        </select>
    </td>

</tr>
</table>

</body>