Js获取下拉框当前选择项的文本和值

最新推荐文章于 2025-03-21 10:00:00 发布

枫-无-痕

最新推荐文章于 2025-03-21 10:00:00 发布

阅读量1.4w

点赞数 3

分类专栏：工作每日一记文章标签：下拉框获取值 js获取下拉框

工作每日一记专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了如何使用JavaScript和JQuery获取HTML下拉框中当前选中项的值和文本。通过多种方法展示了如何利用原生JavaScript和JQuery库来实现这一功能，包括获取选项的索引、值和文本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<span class="red">* </span>
地       区：
<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代码.

例子：

function change()
{
       var index=document.getElementById("levelValue").selectedIndex;//获取当前选择项的索引.
       var text = document.getElementById("levelValue").options[index].text;
       $("#levelName").val(text)； levelName为添加的隐藏域便于后台request接收。
   }

转载自
出处：http://www.cnblogs.com/52XF/