DOM中的appendChild()失效

不知道什么原因，下面体现在IE7与firefox运行的差异，不知道是不是兼容性问题，还是浏览器对DOM版本的支持程度，望各位大虾指点迷津，代码如下<select id="select1" multiple="multiple" size=20>
<option>可以选择的水果</option>
<option>--------------</option>
<option value="大香蕉">香蕉</option>
<option value="大苹果">苹果</option>
<option value="大橘子">橘子</option>
<option value="大火龙果">火龙果</option>
</select>
<input type="button" id="add" value=">>" onclick="javascript:addSelect()"/>
<input type="button" id="del" value="<<" onclick="javascript:delSelect()"/>
<select id="select2" multiple="multiple" size=20>
<option>已经选择的水果</option>
<option>--------------</option>
</select>
function addSelect()
{
    var mysel1=document.getElementById("select1");
    var mysel2=document.getElementById("select2");
    var index=mysel1.selectedIndex;
    var len=mysel2.options.length;
    if(index>1)
    {
        var newoption=document.createElement("option");
//newoption.value=mysel1.options[index].value;  //IE7与firefox无效
//newoption.value=mysel1.options[index].text;  //IE7与firefox无效
newoption.setAttribute("value",mysel1.options[index].value);  //IE7与firefox无效
newoption.setAttribute("text",mysel1.options[index].text);  //IE7与firefox无效
mysel2.appendChild(newoption);
//mysel2.appendChild(new Option(mysel1.options[index].text,mysel1.options[index].value)); //firefox正常，ie无反应 mysel1.options[index]=null;
   }
};

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title> new document </title>
      <meta name="generator" content="editplus" />
      <meta name="author" content="" />
      <meta name="keywords" content="" />
      <meta name="description" content="" />
      <meta http-equiv="content-Type" content="text/html;charset=utf-8" />
     </head> <body>
      <select id="select1" multiple="multiple" size=20>
    <option>可以选择的水果</option>
    <option>--------------</option>
    <option value="大香蕉">香蕉</option>
    <option value="大苹果">苹果</option>
    <option value="大橘子">橘子</option>
    <option value="大火龙果">火龙果</option>
    </select>
    <input type="button" id="add" value=">>" onclick="javascript:addSelect();return false;"/>
    <input type="button" id="del" value="<<" onclick="javascript:delSelect();return false;"/>
    <select id="select2" multiple="multiple" size=20>
    <option>已经选择的水果</option>
    <option>--------------</option>
    </select>
    <script type="text/javascript">
    function addSelect()
    {
        var mysel1=document.getElementById("select1");
        var mysel2=document.getElementById("select2");
        var index=mysel1.selectedIndex;
        if(index>1)
        {
    mysel1.options[index].selected = false;
    mysel2.appendChild(mysel1.options[index]);
       }
    };</script>
     </body>
    </html>
      

  2.   

    老大啊，要给option添加innerHTML属性，光value你看的见么？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？
      

  3.   

    这个ie7和ff绝对支持的，我做过N了，放心研究吧
      

  4.   

    <select id="select1" multiple="multiple" size=20>
    <option>可以选择的水果</option>
    <option>--------------</option>
    <option value="大香蕉">香蕉</option>
    <option value="大苹果">苹果</option>
    <option value="大橘子">橘子</option>
    <option value="大火龙果">火龙果</option>
    </select><input type="button" id="add" value=">>" onclick="javascript:addSelect()"/>
    <input type="button" id="del" value="<<" onclick="javascript:delSelect()"/><select id="select2" multiple="multiple" size=20>
    <option>已经选择的水果</option>
    <option>--------------</option>
    </select><script>
    function addSelect()
    {
        var mysel1=document.getElementById("select1");
        var mysel2=document.getElementById("select2");
        var index=mysel1.selectedIndex;
        var len=mysel2.options.length;
        if(index>1)    {
            var newoption=document.createElement("option");
    newoption.value=mysel1.options[index].value;
    newoption.innerHTML=mysel1.options[index].text;
    mysel2.appendChild(newoption);
    //mysel2.appendChild(new Option(mysel1.options[index].text,mysel1.options[index].value)); //firefox正常，ie无反应 mysel1.options[index]=null;
       }
    };
    </script>
      

  5.   


    if(index>1) {
      var newoption=document.createElement("option");
    newoption.setAttribute("value", mysel1.options[index].value);
    var text = document.createTextNode(mysel1.options[index].text);
    newoption.appendChild(text);
    mysel2.appendChild(newoption);  }
      

  6.   


    <select id="select1" size="20">
    <option>可以选择的水果</option>
    <option>--------------</option>
    <option value="大香蕉">香蕉</option>
    <option value="大苹果">苹果</option>
    <option value="大橘子">橘子</option>
    <option value="大火龙果">火龙果</option>
    </select><input type="button" value=" >> " onclick="add()">
    <input type="button" value=" << " onclick="del()"><select id="select2" size="20">
    <option>可以选择的水果</option>
    <option>--------------</option>
    </select><script language="javascript">
    function add(){
    var select1 = document.getElementById("select1");
    var select2 = document.getElementById("select2");
    var select_index = select1.selectedIndex; if(select_index > 1){
    var option = document.createElement("option");
    option.value = select1.options[select_index].value;
    option.innerHTML = select1.options[select_index].innerHTML;
    select2.appendChild(option);
    select1.options[select_index] = null;
    }
    }function del(){
    var select1 = document.getElementById("select1");
    var select2 = document.getElementById("select2");
    var select_index = select2.selectedIndex;

    if(select_index > 1){
    var option = document.createElement("option");
    option.value = select2.options[select_index].value;
    option.innerHTML = select2.options[select_index].innerHTML;
    select1.appendChild(option);
    select2.options[select_index] = null;
    }
    }
    </script>
      

  7.   

    最好别要用appendChild添加optionselect.options.length = 0; //清空
    select.options[select.options.length] = option; //添加
      

  8.   

    if里直接一句话：
    select.options.add(new Option(text,value));