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

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

时间 2014-04-26 19:58:00  博客园-所有随笔区原文  http://www.cnblogs.com/djgs/p/3691979.html

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