当前位置: 代码迷 >> JavaScript >> 动态添加option的困惑?该怎么解决
  详细解决方案

动态添加option的困惑?该怎么解决

热度:82   发布时间:2012-03-05 11:54:01.0
动态添加option的困惑?
请问在下面的HTML页面中,当点击“我要添加列表选项”时先拉列表a name="mysel"的下拉列表和name="mytest" 的一样,怎样可以实现啊
<body>
下拉列表a
<select name="mysel">

</select>
下拉列表b
<select name="mytest">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<a href="AddOption()">我要添加列表选项</a>
<script language="javascript">
function AddOption()
{

}
</script>
</body>

------解决方案--------------------
HTML code

<select   name="mysel">

</select>
下拉列表b
<select   name="mytest">
    <option   value="1"> 1 </option>
    <option   value="2"> 2 </option>
    <option   value="3"> 3 </option>
</select>
<a  href="#" onclick="AddOption()"> 我要添加列表?? </a>
<script   language="javascript">
function   AddOption()
{
        document.getElementsByName("mysel")[0].innerHTML=document.getElementsByName("mytest")[0].innerHTML
        //alert(document.getElementsByName("mysel")[0].innerHTML)
}
</script>

------解决方案--------------------
下面的例子在上面创建的 SELECT 列表的底部添加了一个新选项。新选项的构造程序也可在 Microsoft JScript® 中使用。

HideExample

<SCRIPT LANGUAGE="JScript">
var oOption = document.createElement("OPTION");
oOption.text="法拉利";
oOption.value="4";
oSelect.add(oOption);
</SCRIPT>



MS官方脚本
------解决方案--------------------
JScript code

<script type="text/jscript"> 
    function AddOption() 
    {
        debugger
        var oSelFrom=$("mytest");
        var oSelTo=$("mysel");
        for(var iCount=oSelFrom.options.length-1,i=iCount,thisOption=oSelFrom.options;i>=0;i--){
            var newOption=new Option(thisOption[iCount-i].text,thisOption[iCount-i].value);
            oSelTo.options.add(newOption);
        }
    }
    function $(o){
        return document.getElementById(o);
    }
    </script>

------解决方案--------------------
oSelFrom.options.length=0
  相关解决方案