firefox下获取下列框选中option的text的代码

更新时间：2010年06月25日 20:04:47 作者：

Firefox下面没有innerText,所以我们想在firefox下获取下列框选中option的text（注意不是value）时会比较吃力。笔者结合自己在项目中的解决方案和代码总结一下，请大家指教。

知识点：
0、为什么要innerText？因为安全问题
1、为firefox dom模型扩展属性
2、currentStyle属性可以取得实际的style状态
3、IE实现innerText时考虑了display方式，如果是block则加换行
4、为什么不用textContent？因为textContent没有考虑元素的display方式，所以不完全与IE兼容
代码：在IE6,7,8 和firefox 2,3下测试均通过。

<html> <head> <script language="javascript"> //If your browser is IE , return true. If is others, like firefox, return false. function isIE(){ //ie? if (window.navigator.userAgent.toLowerCase().indexOf("msie")>=1) return true; else return false; } //If is firefox , we need to rewrite its innerText attribute. if(!isIE()){ //firefox innerText define HTMLElement.prototype.__defineGetter__( "innerText", function(){ var anyString = ""; var childS = this.childNodes; for(var i=0; i<childS.length; i++) { if(childS[i].nodeType==1) anyString += childS[i].tagName=="BR" ? '\n' : childS[i].textContent; else if(childS[i].nodeType==3) anyString += childS[i].nodeValue; } return anyString; } ); HTMLElement.prototype.__defineSetter__( "innerText", function(sText){ this.textContent=sText; } ); } function getSelectedText(name){ var obj=document.getElementById(name); for(i=0;i<obj.length;i++){ if(obj[i].selected==true){ return obj[i].innerText; } } } function chk(){ var objText = getSelectedText("mySelect"); alert("seleted option's text is : "+objText); var objValue=document.getElementById("mySelect").value; alert("seleted option's value is :"+objValue); } </script> </head> <body> <select id="mySelect"> <option value="1111">My 1111 hahaha</option> <option value="2222">My 2222</option> <option value="3333">My 3333</option> <option value="4444">My 4444</option> </select> <input type="button" name="button" value="see result" onclick="javascript:chk();"> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

当然，如果单独针对下拉框，也可以不用重写innerText，用下面的代码也能实现。重写innerText是为了兼容除下拉框以外的其他的HTML 元素。

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

JavaScript实现封闭区域布尔运算的示例代码
这篇文章主要介绍了JavaScript实现封闭区域布尔运算的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-06-06
一个通过script自定义属性传递配置参数的方法
编写了一个js插件，要使用该插件需要先在html中引入该插件Js,然后再添加一个script标签，在里面调用，需要的朋友可以看看
2014-09-09
javascript:void(0)点击登录没反应怎么解决
这篇文章给大家介绍javascript:void(0)点击登录没反应怎么解决，解决办法是巧用批处理解决IE不支持JavaScript等问题，需要的朋友参考下
2015-11-11
Bootstrap入门教程一Hello Bootstrap初识
Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap是基于 HTML5、CSS3和Javascriopt开发的。这篇文章主要介绍了基于Bootstrap3实现漂亮简洁的CSS3价格表（精美代码版）,需要的朋友可以参考下
2017-03-03
代码整洁之道(重构)
这篇文章主要介绍了代码整洁之道(重构)，不管对于何种语言，重构都是软件开发过程中不可或缺的一部分，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-10-10
JavaScript对象的创建模式与继承模式示例讲解
继承机制是面向对象程序设计使代码可以复用的最重要的手段，它允许程序员在保持原有的特性基础上进行扩展，增加功能，这样产生新的类，称作是派生类。继承呈现了面向对象程序设计的层析结构，体现了由简单到复杂的认知过程。继承是类设计层次的复用
2022-12-12
JavaScript瀑布流布局实现代码
这篇文章主要为大家详细介绍了JavaScript瀑布流布局的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
js 数组操作之pop,push,unshift,splice,shift
本篇文章主要介绍了js数组操作之pop,push,unshift,splice,shift。需要的朋友可以过来参考下，希望对大家有所帮助
2014-01-01
javascript判断元素存在和判断元素存在于实时的dom中的方法
本文主要介绍了javascript判断元素存在和判断元素存在于实时的dom中的方法。具有一定的参考价值，下面跟着小编一起来看下吧
2017-01-01
javascript实现根据时间段显示问候语的方法
这篇文章主要介绍了javascript实现根据时间段显示问候语的方法,涉及javascript时间与字符串的相关操作技巧,需要的朋友可以参考下
2015-06-06