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需再刷新一下页面才能执行]

您可能感兴趣的文章:

原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
这篇文章主要介绍了原生js实现可兼容PC和移动端的拖动滑块功能,结合实例形式详细分析了javascript事件响应及页面元素属性动态操作实现滑块拖动功能的相关操作技巧,需要的朋友可以参考下
2019-08-08
JS解析json数据并将json字符串转化为数组的实现方法
json数据在ajax实现异步交互时起到了很重要的作用，他可以返回请求的数据，然后利用客户端的js进行解析，这一点体现出js的强大，本文介绍JS解析json数据并将json字符串转化为数组的实现方法，需要了解的朋友可以参考下
2012-12-12
JavaScript使用canvas绘制坐标和线
这篇文章主要为大家详细介绍了JavaScript使用canvas绘制坐标和线，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-04-04
JS面向对象编程详解
这篇文章主要为大家详细介绍了JS面向对象编程，帮助大家更详细的对JS面向对象进行学习，感兴趣的朋友可以参考一下
2016-03-03
uni-app开发微信小程序遇到的部分踩坑实战
最近在用uni-app开发微信小程序,这里将开发中遇到的坑和问题记录一下,所以下面这篇文章主要给大家介绍了关于uni-app开发微信小程序遇到的部分踩坑,需要的朋友可以参考下
2023-02-02
JS+canvas画一个圆锥实例代码
本篇文章给大家讲解html中用canvas函数配合JS画出一个圆锥形的图形实例，有需要的朋友学习测试下吧。
2017-12-12
JavaScript中:表达式和语句的区别[译]
本文要讲的是JavaScript中非常重要的两个知识点:表达式(expressions)和语句(statements)之间的区别
2012-09-09
Openlayers绘制地图标注
这篇文章主要为大家详细介绍了Openlayers绘制地图标注，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09
一文详解如何在uniapp中优雅地使用WebView
最近工作中遇到webview,对于我这个刚接触前端的小白来说真的不懂啥意思,下面这篇文章主要给大家介绍了关于如何在uniapp中优雅地使用WebView的相关资料,需要的朋友可以参考下
2023-01-01
JavaScript中this机制是如何真正工作的
JavaScript中this机制提供了更优雅的方式来隐含地“传递”一个对象引用,导致更加干净的API设计和更容易的复用,this既不是函数自身的引用,也不是函数词法作用域的引用,this实际上是在函数被调用时建立的一个绑定,它指向什么是完全由函数被调用的调用点来决定的
2023-11-11