집 > 기사 > 웹 프론트엔드 > javascript에서 옵션의 텍스트 값을 얻는 방법(firefox에서 사용됨)

javascript에서 옵션의 텍스트 값을 얻는 방법(firefox에서 사용됨)

黄舟원래의: 2016-12-15 11:02:201186검색

javascript에서 옵션의 텍스트 값을 가져오는 방법(firefox에서 사용)

Firefox에는 innerText가 없으므로 다음 상자에서 옵션의 텍스트(값이 아님)를 가져오려고 합니다. Firefox에서는 더 어려울 것입니다. 저자가 프로젝트에서 자신이 개발한 솔루션과 코드를 바탕으로 정리하고, 조언을 구합니다.

지식 포인트:

0. 왜 innerText인가요? 보안 문제로 인해

1. Firefox DOM 모델에 대한 속성 확장

2. currentStyle 속성은 실제 스타일 상태를 얻을 수 있습니다

3. innerText Display 모드 구현 시 블록인 경우 줄바꿈을 추가하세요

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 중국어 홈페이지(www.php.cn)를 참고하시기 바랍니다. )!

성명：

이전 기사：자바스크립트 프로그램과 관련된 최적화 문제다음 기사：자바스크립트 프로그램과 관련된 최적화 문제

javascript에서 옵션의 텍스트 값을 얻는 방법(firefox에서 사용됨)

관련 기사