`
easonfans
  • 浏览: 252991 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

IE浏览器下select元素不支持innerHTML

阅读更多

在IE环境下,如果要通过innerHTML给select元素附加options,往往会无效,这是ie的一个bug

所以如果要通过innerHTML来生成select元素,可以在外面加个div,然后把innerHTML附给这个div。或者通过编程的方式来生成select。可以有以下三种方式:

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>\n';
	}
	select2.outerHTML = sOpts  + "</SELECT>";
}

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)
	}
}

 

来源:http://www.collin.cn/?p=81

 

我觉得这个非常好,使用innerHTML不要将select的字段一个一个的加,像这样innerHTML+=,写在一个字符串上,一次加完,代码清楚又方便!

看我的一个例子:

function yearString()
{//用于得到年份的下拉列表数据
	var strYear="<select>";
  	var objDate=new Date();
	var year=objDate.getFullYear();//以四位数字返回年
	
	for(var basicYear=2000,n=0;basicYear<=year;basicYear++,n++)
	{
		strYear+='<option value="'+(year-n)+'">'+(year-n)+'</option>\n';
	}
	strYear+="</select>"; 
	return strYear;
}

//添加下拉框
  	oCell1_0.innerHTML='选择年份:'; 
	oCell1_0.innerHTML+=yearString();

 

呵呵,网上好多人说innerHTML加select不能识别时IE的BUG,呵呵,怎么说这是个解决的方法!

这个有一部分是转载,有一部分是原创,算原创吧,怎么说我的是能运行的啊,我没骗人!

分享到:
评论

相关推荐

    火狐与IE浏览器之间的一些差别收集.docx

    ### 火狐与IE浏览器之间的一些差别收集 #### 一、IE与Firefox的JavaScript和CSS差异 在Web开发过程中,不同的浏览器对于JavaScript和CSS的支持程度各不相同,这往往导致了网页在不同浏览器下的表现差异。以下是...

    解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)

    问题的根源在于IE浏览器的一个非标准行为。当尝试通过`innerHTML`设置`&lt;select&gt;`元素的内容时,IE会忽略`&lt;option&gt;`标签的开头,并将其内容拆分为多个节点,导致插入操作出错。这种行为与其他主流浏览器(如Firefox、...

    IE6/7/8/9中Table/Select的innerHTML不能赋值的解决方法

    innerHTML属性通常用于设置或获取元素的HTML内容,但在某些特定元素上,IE浏览器并不支持直接赋值操作。 在IE6、7、8、9中,以下元素的innerHTML属性是只读的:COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLE,...

    select选择框内容左右移动

    9. **兼容性测试**:在不同浏览器上进行测试,确保代码的兼容性和稳定性,特别是老版本的IE浏览器,可能需要额外的polyfill或条件语句。 10. **代码组织**:为了保持代码的整洁和可维护性,可以采用模块化开发,...

    用谷歌浏览器得不到动态添加表单的值

    在使用谷歌浏览器(Chrome)处理网页交互时,有时会遇到一个问题:通过JavaScript的`innerHTML`属性无法正确获取动态添加到页面中的表单元素的值。这个问题与不同浏览器之间的兼容性有关,尤其是与Internet Explorer...

    js在IE与firefox的差异集锦

    IE浏览器使用filter属性来支持滤镜效果,如设置透明度。而Firefox则使用-moz-opacity属性来实现相同的透明度效果。 4. 捕获事件: IE浏览器中可以通过obj.setCapture()和obj.releaseCapture()方法来捕获和释放鼠标...

    ie focus bug 解决方法

    然而,在某些情况下,尤其是当动态创建并添加元素到DOM后,直接调用`input.focus()`在IE浏览器中可能无法正常工作。这通常是因为浏览器的渲染机制与JavaScript执行顺序之间存在冲突,导致新创建的元素尚未完全渲染到...

    CSS自定义select下拉选择框不用其他标签模拟且兼容多数浏览器

    这种方法的一个限制是,它无法完全消除浏览器的默认边框和样式,特别是在IE浏览器中。因此,对于更复杂的自定义需求,可能需要借助JavaScript库或插件,如Select2、Chosen等,它们可以提供更全面的跨浏览器兼容性和...

    ajax-DWR笔记.doc

    要注意,在某些老版本的IE浏览器(如IE5以下)中,仅使用util.js可能不工作,需要与engine.js一起使用。若要获取元素的值,可以使用`innerHTML`属性或DWRUtil的`getValue("elementId")`方法。 2. **`DWRUtil....

    javascript option onclick事件ie解决方案 兼容ie,firefox

    在 IE 浏览器中,Option onclick 事件无法正确触发的原因是因为 IE 不支持 Option 元素的 onclick 事件。相比之下,Firefox 浏览器可以正确地触发 Option onclick 事件。 解决方案 要解决这个问题,我们可以使用 ...

    JavaScript技巧大全(ie)

    以下是一些关于JavaScript的实用技巧,特别关注与IE浏览器的兼容性: 1. **事件源对象**:`event.srcElement` 可以用来获取触发事件的元素,而`event.srcElement.tagName` 和 `event.srcElement.type` 分别可以获取...

    javascript经典特效---控制选择框个数.rar

    例如,某些方法在IE浏览器中可能不支持,需要使用jQuery等库来解决。 7. 错误处理:在实际开发中,错误处理是必不可少的。例如,如果用户尝试操作不存在的选择框,程序应该能优雅地处理并给出提示。 总结来说,...

    javascript获取选中的文本的方法代码.docx

    // 对于IE浏览器,使用document.selection和createRange方法 // 对于现代浏览器(如Firefox、Chrome等),使用window.getSelection() var selectText = (document.selection && document.selection.createRange) ...

    javascript中select下拉框的用法总结

    例如,`event`对象在IE和非IE浏览器中获取方式不同,上面的例子中已经处理了这个问题。 - **异步加载数据**:通常,下拉框的数据是从后台异步获取的,可以使用AJAX请求获取数据后动态创建`option`。 - **多选下拉框*...

    IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)

    由于这些旧版IE浏览器不支持`createRange`,因此需要使用`createTextRange`来实现类似的功能。本文将详细介绍如何使用`createTextRange`在这些浏览器中记录用户选定的文本范围,并探讨如何获取和设置选区的开始和...

    javascript省市级联

    2. **事件监听**:使用`addEventListener`或`attachEvent`(IE浏览器)来监听用户的省份选择变化。当用户选择一个省份后,触发对应的事件处理函数。 3. **数据结构**:通常,省市级联的数据会存储在一个JSON对象中...

    JavaScript动态创建div等元素实例讲解

    // 非IE浏览器设置文本 option.innerHTML = i; // IE浏览器设置文本 select.appendChild(option); } document.body.appendChild(select); } ``` **知识点:** - 使用循环来批量创建选项(`&lt;option&gt;`)。 - ...

    ie8.0下显示本地图片的js实现代码 img.src

    以上就是关于在IE8.0下显示本地图片的JS实现代码的详细解释,它包括了如何处理IE8.0的特有情况,以及如何利用HTML5特性在非IE浏览器中进行图片预览。在实际应用中,还可以进一步完善功能,比如添加图片大小限制、...

Global site tag (gtag.js) - Google Analytics