zoukankan      html  css  js  c++  java
  • Js获取下拉框当前选择项的文本和值

      现在有一个Id为AreaId的下拉框,要获取它当前选择项的文本和值有以下方法:

    <span class="red">* </span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;区:
    <span>
          <select id="AreaId" name="AreaId" size="1" class="sel">
               <option>-请选择地区-</option>
               <option value="1">北京</option>
               <option value="2">上海</option>
               <option value="3">深圳</option>
           </select>
    </span>            

    方法一:使用JavaScript原生态的方法.

      1.获取值:    

    document.getElementById("AreaId").value;//有效,能得到正确的值.

    var index=
    document.getElementById("AreaId").selectedIndex;//获取当前选择项的索引.
    document.getElementById("AreaId").options[index].value;//获取当前选择项的.

     var obj=document.getElementById("AreaId");

            for(i=0;i<obj.length;i++) {//下拉框的长度就是它的选项数.

               if(obj[i].selected==true) {

                var text=obj[i].value;//获取当前选择项的.

          }

        }

      2.获取文本:

    var index=document.getElementById("AreaId").selectedIndex;//获取当前选择项的索引.
    document.getElementById("AreaId").options[index].text;//获取当前选择项的文本.

    document.getElementById("AreaId").options[index].innerHTML;//获取当前选择项的文本.

     var obj=document.getElementById("AreaId");

            for(i=0;i<obj.length;i++) {//下拉框的长度就是它的选项数.

               if(obj[i].selected==true) {

                var text=obj[i].text;//获取当前选择项的文本.

          }

        }

    document.getElementById("AreaId").text;//注意,这句代码无效,得到的结果为undefined.

    方法二:使用JQuery方法(前提是已经加载了jquery库).

      1.获取值:

    $("#AreaId").val();//获取当前选择项的值.

    var options=$("#AreaId option:selected");//获取当前选择项.
    options.val();//获取当前选择项的值.

      2.获取文本:

    var options=$("#AreaId option:selected");//获取当前选择项.
    options.text();//获取当前选择项的文本.

    options.innerHTML();//获取当前选择项的文本.

    $("#AreaId").text;
    //注意,这句代码无效,得到的结果为undefined.

     

    其他属性:  

    innerText:

    var index=document.getElementById("AreaId").selectedIndex;//获取当前选择项的索引.
    document.getElementById("AreaId").options[index].innerText;//获取当前选择项的文本,IE支持,Firefox不支持.

    document.getElementById("AreaId").innerHTML;//获取当前下拉框所有的元素,包括Html代码.注意大小写.
    document.getElementById("AreaId").textContent;//获取当前下拉框中所有的选择项文本,不包括Html代码.

    感谢您怀着耐心看完整篇博文!!!
    如果文章有什么错误或不当之处,请您斧正!
    您有任何意见或者建议,您可以给我发邮件,也可以在下面留言,我看到了会第一时间回复您的,谢谢! 

  • 相关阅读:
    微信扫码跳转到H5页面输入时,如何去掉提示:防盗号或诈骗,请不要输入QQ密码?
    org.springframework.web.multipart.MultipartException: Failed to parse multipart servlet request; nested exception is java.io.IOException: The temporary upload location [/tmp/tomcat.1428942566812653608
    centos7 中查看log_bin是否开启以及开启log_bin
    从支付宝SDK的支付流程理解什么是公钥和私钥,什么是加密和数字签名
    Centos7中rc.local设置springboot项目开机自启动
    IIS配置实现反向代理(图文)
    【经验分享】卡方检验实战--检验次日留存率与用户分类的独立性
    R绘制3D散点图
    kmeans聚类理论篇
    PCA主成份分析学习记要
  • 原文地址:https://www.cnblogs.com/djgs/p/3691979.html
Copyright © 2011-2022 走看看