js添加删除父节点

现在有一个:   <select id="s1" size="4" >
      <option value="key0" >text0</option>
      <option value="key1" >text1</option>
      <option value="key2" >text2</option>
      <option value="key3" >text3</option>
      <option value="key4" >text4</option>
      <option value="key5" >text5</option>
   </select>我想在 <option>节点外 添加一个 <span style='display:none'></span> 来控制其 隐藏
并且还有可能 再将 这个<span style='display:none'></span> 去掉
那Js该如何使用DOM实现？
现提供 隐藏和现实的optin序号为2 即key2这行option
document.getElementById("s1").options[2]
如何隐藏 并重新显示

解决方案 »

  1.   


    <!doctype html >
    <html>
    <head>
    <title> new document </title>
    <script type="text/javascript">
    function hide(n){
    var sel = document.getElementById("s1");
    var span = document.createElement("span");
    span.style.display = "none";
    span.id = "span" + n;
    sel.insertBefore(span, sel.options[n]);
    span.appendChild(sel.options[n]);
    };
    function show(n){
    var sel = document.getElementById("s1");
    span = document.getElementById("span"+n);
    if(span){
    sel.insertBefore(span.getElementsByTagName("option")[0], sel.options[n]);
    sel.removeChild(span);
    }
    };
    </script>
    </head>
    <body>
    <select id="s1" size="4" >
          <option value="key0" >text0</option>
          <option value="key1" >text1</option>
          <option value="key2" >text2</option>
          <option value="key3" >text3</option>
          <option value="key4" >text4</option>
          <option value="key5" >text5</option>
       </select>
    <input type="button" value="隐藏" onclick='hide(2)' />
    <input type="button" value="显示" onclick='show(2)' />
    </body>
    </html>
      

  2.   

    IE和FF下 正常 chrome这句报错
    sel.insertBefore(span.getElementsByTagName("option")[0], sel.options[n]);
    我换成
    sel.insertBefore(span.getElementsByTagName("option")[0], span);
    就OK了 不过若是多次点击隐藏chrome还是会报错
    看来chrome对于options的识别很独特啊 看来为了统一只能用nextSibling去一个一个判断了我昨晚最终想的是用 cloneNode和replaceChild 不过条条大路通罗马 非常感谢