这样写的代码：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>

IE中部分版本的浏览器对Select标签设置innerHTML无效的问题的更多相关文章

  1. Android中Listview点击item不变颜色以及设置listselector 无效

    Android中Listview点击item不变颜色以及设置listselector 无效 这是同一个问题,Listview中点击item是会变颜色的,因为listview设置了默认的listsele ...

  2. 第一篇-Html标签中head标签，body标签中input系列，textarea和select标签

    第十四周课程(1-12章节) HTML 裸体 CSS   穿华丽衣服 Javascript 动起来 一 HTML (20个标签) 1.我们的浏览器是socket客户端 2.一套规则,浏览器认识的规则 ...

  3. 如何让低版本IE浏览器支持HTML5标签并为其设置样式

    现代的浏览器都支持HTML5,HTML5定义了 8 个新的 HTML 语义元素.所有这些元素都是 块级 元素. 为了能让旧版本的浏览器正确显示这些元素,你可以设置 CSS 的 display 属性值为 ...

  4. html select 标签设置默认选中

    方法有两种. 第一种通过<select>的属性来设置选中项,此方法可以在动态语言如php在后台根据需要控制输出结果. 1 2 3 4 5 < select  id =  " ...

  5. select标签设置只读的方法（下拉框不可选但可传值）

    1. <select id="s1" name="s1" onfocus="this.defaultIndex=this.selectedInd ...

  6. 解决在IE6、7中用height来设定SELECT标签高度无效的兼容性问题

    在IE6.7中用height来设定SELECT标签高度是无效的,宽度的话各浏览器设置都是一致的,解决方法就是在select外嵌套两层标签,一层用来遮挡select的默认边框(在IE6.7中设置bord ...

  7. 设置select标签的高度

    当无法给select标签设置高度的时候,给他加一个背景色,就可以设置了.

  8. CSS - Select 标签在不同浏览器中的高度设置

    当使用Select标签时,在不同浏览器中显示的高度不同,如何解决此问题: 解决方法链接:http://stackoverflow.com/questions/20477823/select-html- ...

  9. HTML5中的语义标签兼容IE8以及更低版本的浏览器

    看某教程,说让HTML5的这些语义标签能够兼容低版本的浏览器,原文是“你可以设置css的display属性为block”.很好理解,就设置css样式为block嘛,那就直接设置咯: header, s ...

随机推荐

  1. Linux相关——画图软件安装

    其实也不知道算不算Linux相关了... 装个画图软件还是很方便的,刚刚试了一下kolourpaint,感觉还行,就记录下来吧. 先记录几个快捷键emmmm print ---->全屏截图 al ...

  2. POJ2299：Ultra-QuickSort——题解

    http://poj.org/problem?id=2299 题目大意:给一串数,求其按照两两交换排序最少排几次. 求逆序对裸题,不建议用数据结构(因为需要离散化) #include<cstdi ...

  3. UVA.839 Not so Mobile ( 二叉树 DFS)

    UVA.839 Not so Mobile ( 二叉树 DFS) 题意分析 给出一份天平,判断天平是否平衡. 一开始使用的是保存每个节点,节点存储着两边的质量和距离,但是一直是Runtime erro ...

  4. BigBlueButton简介

    BigBlueButton是一套开源的视频会议系统,特别适用于远程教育但也可以用于标准的会议.该系统 可以让多个用户登录共享他们的摄像头并同时能够通过VOIP进行交流.可以在线演示PDF和Office ...

  5. [C#] 小记 new 和 override 关键字

    C#要想实现函数的override,要求和C++一样,父类的函数必须用virtual关键字注明,随后在子类中用override关键字表明重写的函数. 子类同名函数定义时,如果什么都不写,或者使用new ...

  6. ZooKeeper内部构件

    引言 这个文档包含关于ZK内部工作的信息.目前为止,它讨论了这些主题: 原子广播 日志 原子传播 ZK的核心是一个原子的通信系统,它使所有的服务端保持同步. 保证.属性和定义 通过使用ZooKeepe ...

  7. 确保web安全的https、确认访问用户身份的认证（第七章、第八章）

    第七章 确保web安全的https 1.http的缺点: (1)通信使用明文,内容可能会被窃听 (2)不验证通信方的身份,因此有可能遭遇伪装 (3)无法证明报文的完整性,因此有可能已遭篡改. 2.通信 ...

  8. hdu 3948 The Number of Palindromes

    The Number of Palindromes Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 262144/262144 K (J ...

  9. 搜索：BFS

    如果题目真的要考察宽度优先搜索,那么这类题目往往具有比较大的编码难度,换个说法,就是细枝末节特别多,状态特别复杂.. 剥茧抽丝,这里以一个比较“裸”的BFS作为例子,了解一下实现BFS的一些规范. 直 ...

  10. 长ping域名带时间戳

    ping www.baidu.com |awk '{print $0 "\t" strftime("%Y:%m:%d-%H:%M:%S",systime())} ...