JavaScriptでオプションのテキスト値を取得する方法（Firefoxで使用）-jsチュートリアル-php.cn

JavaScriptでオプションのテキスト値を取得する方法（Firefoxで使用）

黄舟

リリース： 2016-12-15 11:02:20

オリジナル

1158 人が閲覧しました

JavaScriptでオプションのテキスト値を取得する方法（Firefox下で使用）

Firefox下ではinnerTextがないので、Firefox下では以下のボックス内のオプションのテキスト（値ではないことに注意）を取得したいとなります。より困難。著者が自身のソリューションとプロジェクト内のコードを基に要約し、アドバイスを求めています。

知識ポイント:

0 なぜ innerText なのか?セキュリティの問題のため

1. Firefox dom モデルの属性を拡張します

2. currentStyle 属性は実際のスタイルの状態を取得できます

3. IE が innerText を実装する場合、表示メソッドが考慮されます。改行が追加されます

4. textContent を使用しないのはなぜですか? textContent は要素の表示モードを考慮しないため、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" ? &#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>

ログイン後にコピー

もちろん、ドロップダウンボックスのみを対象とする場合は、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&#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>

ログイン後にコピー

上記は、JavaScript (Firefox で使用) のオプションのテキスト値を取得する方法の内容です。その他の関連記事については、PHP 中国語 Web サイト (www.php.cn) に注目してください。