码迷,mamicode.com
首页 > 其他好文 > 详细

获取下拉框的文本值和value值

时间:2016-01-12 15:30:20      阅读:266      评论:0      收藏:0      [点我收藏+]

标签:

http://www.cnblogs.com/djgs/p/3691979.html?utm_source=tuicool&utm_medium=referral

 

现在有一个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代码.
技术分享

 

获取下拉框的文本值和value值

标签:

原文地址:http://www.cnblogs.com/LuoXiaoTing604404828/p/5124283.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!