Heim > Web-Frontend > js-Tutorial > Hauptteil

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

黄舟
Freigeben: 2016-12-15 11:02:20
Original
1184 Leute haben es durchsucht

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

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>
Nach dem Login kopieren
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>
Nach dem Login kopieren
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). )!


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage