如何使用JS获取下拉列表框的显示值

Posted 2023-05-10

<select>    <option value="oneValue"> one </option></select> 如上面的例子  我点击选中one  ,使用JS如何获取one这个单词，看清楚，不是Value里面的值 是它显示的值

js获取下拉列表框文本值，例如下面的html代码： 

<select onchange="isSelected(this.value);" id="city"> 
<option 
value="1">北京</option> 
<option value="2" >上海</option> 

<option value="2" >广州</option> 
</select>

也就是说当用户选择“上海”这一列时，需要将“上海”这个名称保存起来。其实方法很简单。看下面javascript代码： 

function isSelected(value)  
var cityName; 
var city = 
document.getElementById("city"); 
//获取选中的城市名称 

for(i=0;i<city.length;i++) 
if(city[i].selected==true) 
cityName 
= city[i].innerText; //关键点 
alert("cityName:" + cityName); 
 

也可以这样做：

function isSelected(value)  
var city = document.getElementById("city"); 

alert(city.options[city.selectedIndex].innerText); 

大致解释一下，首先在HTML页面上有一个下拉框，并为此下拉框定了一个“city”的id，并为其绑定了一个onchange事件，通过此事件调用javascript函数。


在javascript函数当中，通过domcument对象获取当前下拉框的节点元素，由于节点的值并非只有一个，所以我们可以通过循环节点来得到每个选项的值。在循环的时候通过判断当前选项是否选中，如果选中则使用city[i].innerText
方式获取当前所选中的文本值。当然如果需要获取选项值，只需如此即可：city[i].value.


至此，通过以上方法在IE下已能达到所要的结果。但是，在FIREFOX下测试时，发现此法不起作用，最后通过查阅资料发现另外一个方法。将city[i].innerText
改为 city[i].text即可。这种方法对IE及FIXEFOX都适用！

参考技术A 这个简单，把value里值和页面显示的值设为相同的不就行了 参考技术B var s=document.getElementById("select");
alert(s[s.selectedIndex].text); 参考技术C I don’t know

如何获取下拉列表框的值

分别使用javascript原生的方法和jquery方法
<select id="test"  name="">   
  <option   value="1">text1</option>   
  <option   value="2">text2</option>   
</select>
code:
一：javascript原生的方法
  1:拿到select对象： var  myselect=document.getElementById("test");
  2：拿到选中项的索引：var index=myselect.selectedIndex ;             // selectedIndex代表的是所选中项的index
  3:拿到选中项options的value：  myselect.options[index].value;
  4:拿到选中项options的text：  myselect.options[index].text;

二：jquery方法（前提是已经加载了jquery库）
1:var options=$("#test option:selected");  //获取选中的项
2:alert(options.val());   //拿到选中项的值
3:alert(options.text());   //拿到选中项的文本