javascript如何取option的text值(firefox下使用)

2020-11-27 来源：九壹网

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>

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

<html> 
<head> 
<script language="javascript">
 
 function chk(){ 
 //var objText = getSelectedText("mySelect");
 var obj = document.getElementById("mySelect");
 var objText = obj.options[obj.selectedIndex].text
 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>

显示全文

全部栏目

javascript如何取option的text值(firefox下使用)