zoukankan      html  css  js  c++  java

  • 如何在firefox下获取下列框选中option的text

    Firefox下面没有innerText,所以我们想在firefox下获取下列框选中option的text（注意不是value）时会比较吃力。笔者结合自己在项目中的解决方案和代码总结一下，请大家指教。

    知识点：

    0、为什么要innerText？因为安全问题

    1、为firefox dom模型扩展属性 

    2、currentStyle属性可以取得实际的style状态

    3、IE实现innerText时考虑了display方式，如果是block则加换行

    4、为什么不用textContent？因为textContent没有考虑元素的display方式，所以不完全与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" ? '\n' : 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's text is :  "+objText);

                var objValue=document.getElementById("mySelect").value;
                alert("seleted option'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's text is :  "+objText);

                var objValue=document.getElementById("mySelect").value;
                alert("seleted option'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>
  • 相关阅读:
    工作中php处理HTTP请求的缺陷总结
    php 快速读取文件夹下文件列表
    php 对象赋值后改变成员变量影响赋值对象
    奇偶数分离小程序
    阻止安卓实体返回键后退的网页js实现
    win处navicat直接导出的sql脚本导入Linux mysql报错问题
    linux安装navicat全程记录
    【自制工具类】Java删除字符串中的元素
    【JSP/Servlet】后台如何获取复选框或可选属性的同名参数
    【Jsp/Servlet】获取客户端使用的ip
  • 原文地址：https://www.cnblogs.com/kungfupanda/p/1765337.html
Copyright © 2011-2022 走看看