innerHTML的不兼容问题（在线等）


<html>
<head>
<script type="text/javascript">
function $(id){return(document.getElementById(id));}function create_city(){
if($("select_province").value =="江苏"){
$("select_city").innerHTML = "<option>南京</option><option>秦淮</option><option>白夏</option>";
}
else{
$("select_city").innerHTML = "<option>广州</option><option>江门</option><option>清远</option>";
}
}
</script>
</head><body>
 <select id="select_province" onchange="create_city()">
      <option>江苏</option>
      <option>广东</option>
    </select>
    <select id="select_city">
      <option>南京</option>
      <option>秦淮</option>
      <option>白夏</option>
    </select>
</body>
</html>
问题：用$("selector").innerHTML来改变option里面的内容，IE 7  8   <option>里面显示为空，  IE6和FF没事

解决方案 »

  1.   

    我建议你那个省option加个value，如<option value="江苏">江苏</option>
      

  2.   

    直接用innerHTML来插入节点貌似不杂好吧...
      

  3.   

    楼主还是用createElement然后appendChild进去吧
      

  4.   

    这个是ie innerHTML option的BUG了
    给select加个容器吧，然后把整个select innerHTML进去<select id="select_province" onchange="create_city()">
      <option>江苏</option>
      <option>广东</option>
      </select>
      <div id="select_city">
      <select>
      <option>南京</option>
      <option>秦淮</option>
      <option>白夏</option>
      </select>
    function $(id){return(document.getElementById(id));}function create_city(){
    if($("select_province").value =="江苏"){
    $("select_city").innerHTML = "<select><option>南京</option><option>秦淮</option><option>白夏</option></select>";
    }
    else{$("select_city").innerHTML = "<select><option>广州</option><option>江门</option><option>清远</option></select>";
    } 
    }
      

  5.   

    微软对这个BUG提供了两个解决方案1，使用createElement，这个是正规渠道，要出错还真有问题了。
    2，插入完整的select字符串，到div中。
      

  6.   

    function appOptions(id,text,val){
      var sel=document.getElementById(id);
      var opt= new Option(text,val);
      sel.add(opt);}
    //添加就直接 appOptions("id","广州",null);
      

  7.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
    </head>
    <body>
    <script type="text/javascript">
    var d=document;
    var select=d.createElement("select");
    d.body.appendChild(select);var optionHTML='<option>123</option><option>123</option><option>123</option>';
    var tempDom=d.createElement("div");
    tempDom.innerHTML=optionHTML;for(var i=0,j=tempDom.childNodes.length;i<j;i++){
        select.appendChild(tempDom.childNodes[0])
    }
    </script>
    </body>
    </html>