Heim > Artikel > Web-Frontend > So erhalten Sie den Textwert der Option in Javascript (verwendet unter Firefox)

So erhalten Sie den Textwert der Option in Javascript (verwendet unter Firefox)

黄舟Original: 2016-12-15 11:02:201115Durchsuche

Unter Firefox gibt es keinen innerText, daher möchten wir den Text (nicht den Wert) der Option im folgenden Feld abrufen Unter Firefox wird es schwieriger. Der Autor fasst es basierend auf seinen eigenen Lösungen und seinem Code im Projekt zusammen und bittet Sie um Rat.

Wissenspunkte:

0. Warum innerText? Aus Sicherheitsgründen

1. Erweitern Sie Attribute für das Firefox-Dom-Modell

2. Das Attribut currentStyle kann den tatsächlichen Stilstatus erhalten

3 Wenn es sich bei der Implementierung des innerText-Anzeigemodus um einen Block handelt, fügen Sie eine neue Zeile hinzu

4. Warum nicht textContent verwenden? Da textContent den Anzeigemodus des Elements nicht berücksichtigt, ist es nicht vollständig kompatibel mit IE

Code: Getestet unter IE6, 7, 8 und Firefox 2, 3. Alle bestanden.

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

Wenn Sie nur auf das Dropdown-Feld abzielen, müssen Sie innerText natürlich nicht neu schreiben. Sie können auch den folgenden Code verwenden. InnerText wurde neu geschrieben, um mit anderen HTML-Elementen außer Dropdown-Feldern kompatibel zu sein.

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

Das Obige ist der Inhalt, wie man den Textwert der Option in Javascript erhält (verwendet unter Firefox). Weitere verwandte Artikel finden Sie auf der chinesischen PHP-Website (www.php.cn). )!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Optimierungsprobleme im Zusammenhang mit Javascript-ProgrammenNächster Artikel：Optimierungsprobleme im Zusammenhang mit Javascript-Programmen

In Verbindung stehende Artikel

Mehr sehen