js select innerHTML问题

jsp的，select 控件中，用innerHTML来显示下拉数据，总是有问题。
如：
jsp中.<select id="test">
</select>
js中.var obj_td =  document.getElementById("test");
var data = '<option value=2>222</option>'
obj_td.innerHTML = data;
alert(obj_td.innerHTML);
最后，obj_td.innerHTML弹出的框中，显示的是222</option>,
test中，也就显示不出来。1.该如何处理？2.反而用innerText可以弹出<option value=2>222</option>的框，
但是显示不出来内容到下拉框中。PS:
data有可能是一串，如<option value='-1'>-请选择-</option><option value='10'>指定专营店</option><option value='21'>销售点</option><option value='64'>沟通代理</option>所以，单独一个个的解析出来用option来搞，有些麻烦（dwr用java代码来查询的数据），不想用这种方法。

解决方案 »

  1.   

    如果父容器只有 select 一个元素，就下面这样，加上<select></select>obj_td.parentNode.innerHTML = "<select id='test'><option value='-1'>-请选择-</option><option value='10'>指定专营店</option><option value='21'>销售点</option><option value='64'>沟通代理</option></select>"
      

  2.   

    1.不能再select对象中，直接用innerHTML吗？
    2.如果父类中有其他对象，不就挂了嘛。
      

  3.   

    var obj_td =  document.getElementById("test");
    obj_td.options[0]=new Option("222","2");alert(obj_td.innerHTML);
      

  4.   

    不过你可以采用new Option
    如果要innerHTML的话，可以用jquery
      

  5.   


    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>主页面</title>
    <script src="jquery.js"></script>
    <script type="text/javascript">
    $(function(){
    var opt = "<option value='-1'>-请选择-</option><option value='10'>指定专营店</option>";
    $("#sel").html(opt);
    });
    </script>
    </head><body>
    <form>
    <select id="sel"></select>
    </form>
    </body>
    </html>
      

  6.   

    除了用LS的jquery方法，最基本的js不能处理吗？
      

  7.   

    var obj_td =  document.getElementById("test");
    var data = '<option value=2>222</option>'
    obj_td.innerHTML = data;
    alert(obj_td.innerHTML);不能这么用，要用innerHTMl即　obj_td.parentNode.innerHTML = "<select id='test'><option value='-1'>　像写的sd5816690要么用var obj_td =  document.getElementById("test");
    obj_td.options[0]=new Option("222","2");　　像shan1119写的。建议用第一种。
      

  8.   

    这是微软承认的IE的BUG，详见 http://support.microsoft.com/kb/276228
    同时里面有建议更换的方式。而下面的文章里，据说是完美解决的方案，我没时间试验，楼主有兴趣自己试一下
    http://www.zhanz5.com/a/javascriptjiaocheng/2010/0515/13391.html
      

  9.   

    高度相似的问题啊，我以为我回答过啊！从一楼拖到最后没看见我。InnerHTML这东西最好少用了，支持的浏览器少兼容差啊还有什么比使用动态DOM修改HTML的DOM树结构。！！！只要最正宗。3楼是最主流的做法。其他的直接忽略！
      

  10.   

    不能用innerHTML修改已在的select
    <select id="test"></select>
    <script>
    var modSelectInnerHTML = (function (){
        var temp = document.createElement('a');
        return function (select, html){
            select.options.length = 0;
            temp.innerHTML= '<select>' + html + '</select>';
            var options = temp.getElementsByTagName('option');
            while (options[0] && select.appendChild(options[0]));
        };
    })();var select = document.getElementById('test');
    var options = '<option value="-1">-请选择-</option><option value="10">指定专营店</option><option value="21">销售点</option><option value="64">沟通代理</option>';modSelectInnerHTML(select, options);
    </script>
      

  11.   

    明白了，是select里不能直接用innerHTML。
    只能用select的parentNode来讲select再重新包一次。
    这个BUG确实