zoukankan      html  css  js  c++  java
  • IE中部分版本的浏览器对Select标签设置innerHTML无效的问题

    这样写的代码:document.getElementById('data_list').innerHTML = data;//data是ajax返回的数据

                        结果发现在ie10的兼容模式下面下拉框没有内容,

                        之后alert调试了一下 发现alert(data)时所有的下拉框的数据都能出来

                        然后alert调试了alert(document.getElementById('data_list').innerHTML),发现第一个下拉框的数据前面少了一个<option>标签

                        解决的时候有两种方案:

                        1. 如果您必须使用 innerHTML ,一种替代方法是使用一个 div 对象封装 SELECT 元素和然后设置 div 对象的 innerHTML 属性。

                   例如:

                       <html>
                  <head>
                    <title>My Example</title>
                      <script language="Javascript">
                            var origDivHTML;

                            function init() {
                                origDivHTML = myDiv.innerHTML;
                            }

                            function setValues() {
                                var oldinnerHTML = "your original innerHTML: " + yourDiv.innerHTML;  
                                  alert(oldinnerHTML);
                                  yourDiv.innerHTML = origDivHTML;
         
                                var curinnerHTML = "your current innerHTML: " + yourDiv.innerHTML;
                                    alert(curinnerHTML);
                            }
                      </script>
                 </head>

              <body onload="init()">
                  <div id="myDiv">
                     <select name="firstSelect" size="1">
                        <option>11111</option>
                        <option>22222</option>
                        <option>33333</option>
                     </select>
                 </div>

                 <div id="yourDiv">
                    <select name="secondSelect" size="1">
                         <option>aaaa</option>
                         <option>bbbb</option>
                         <option>cccc</option>
                    </select>
               </div>
               <button onclick="setValues();">click me to set the values</button>
            </body>
           </html>

    2. 理想情况下,应使用 选项(Option) 集合添加为 SELECT 元素的选项。 下面的代码显示用编程方式将选项添加到 SELECT 元素的三种方法。例如:

       <html>
    <head>
    <title></title>
    </head>
    <body>

    <script>

    function fill_select1() {

        for(var i=0; i < 100; i++) {
            select1.options[i] = new Option(i,i);
        }
    }

    function fill_select2() {

        var sOpts = "<select>";
        for (var i = 0; i < 100; i++) {
            sOpts += '<option value="' + i + '">' + i + '</option>';
        }
        
        select2.outerHTML = sOpts  + "</option>";
    }

    function fill_select3() {

        for(var i=0; i < 100; i++) {
           var oOption = document.createElement("OPTION");
           oOption.text="Option:  " + i;
           oOption.value=i;
           document.all.select3.add(oOption)
        }
    }

    </script>

    <h2>SELECT Box Population</h2>

    <select id=select1 name=select1></select>
    <input type="button" value="Populate with options list" id="button1" name="button1" onclick="fill_select1();"><br/><br/>

    <select id="select2" name="select2"></select>
    <INPUT type="button" value="Populate with outerHTML" id="button2" name="button2" onclick="fill_select2();"><br/><br/>

    <select id="select3" name="select3"></select>
    <input type="button" value="Populate with using createElement" id="button3" name="button3" onclick="fill_select3();">

    </body>
    </html>

  • 相关阅读:
    Cesium案例解析(二)——ImageryLayers影像图层
    Cesium案例解析(一)——HelloWorld
    WebGL简易教程(十四):阴影
    WebGL简易教程(十三):帧缓存对象(离屏渲染)
    关于GDAL读写Shp乱码的问题总结
    WebGL简易教程(十二):包围球与投影
    GDAL集成对KML文件的支持
    WebGL简易教程(十一):纹理
    WebGL简易教程(十):光照
    WebGL简易教程(九):综合实例:地形的绘制
  • 原文地址:https://www.cnblogs.com/jsingleegg/p/3622990.html
Copyright © 2011-2022 走看看