How to get the text value of option in javascript (used under firefox)-JS Tutorial-php.cn

How to get the text value of option in javascript (used under firefox)

黄舟

Release： 2016-12-15 11:02:20

Original

1193 people have browsed it

How to get the text value of option in javascript (used under firefox)

There is no innerText under Firefox, so we want to get the text (note not the value) of option in the following box under firefox. It will be more difficult. The author summarizes it based on his own solutions and code in the project, and asks for your advice.

Knowledge points:

0. Why innerText? Because of security issues

1. Extend attributes for the firefox dom model

2. The currentStyle attribute can obtain the actual style state

3. When IE implements innerText, the display method is considered. If it is a block, a newline is added

4. Why Not using textContent? Because textContent does not consider the display mode of the element, it is not fully compatible with IE

Code: Tested under IE6, 7, 8 and 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" ? &#39;\n&#39; : 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&#39;s text is :  "+objText);

            var objValue=document.getElementById("mySelect").value;
            alert("seleted option&#39;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>

Copy after login

Of course, if you target the drop-down box alone, you don’t need to rewrite innerText. You can also use the following code. InnerText is rewritten to be compatible with other HTML elements except drop-down boxes.

<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&#39;s text is :  "+objText);

            var objValue=document.getElementById("mySelect").value;
            alert("seleted option&#39;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>

Copy after login

The above is the content of how to get the text value of option in javascript (used under firefox). For more related articles, please pay attention to the PHP Chinese website (www.php.cn)!