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

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

<select onchange="isSelected(thisvalue);" id="city"> 

<option 

value="1">北京</option> 

<option value="2" >上海</option> 

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

</select>

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

function isSelected(value) { 

var cityName; 

var city = 

documentgetElementById("city"); 

//获取选中的城市名称 

for(i=0;i<citylength;i++){ 

if(city[i]selected==true){ 

cityName 

= city[i]innerText; //关键点 

alert("cityName:" + cityName); 

} 

}

也可以这样做：

function isSelected(value) { 

var city = documentgetElementById("city"); 

alert(cityoptions[cityselectedIndex]innerText); 

}

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

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

方式获取当前所选中的文本值。当然如果需要获取选项值，只需如此即可：city[i]value

至此，通过以上方法在IE下已能达到所要的结果。但是，在FIREFOX下测试时，发现此法不起作用，最后通过查阅资料发现另外一个方法。将city[i]innerText

改为 city[i]text即可。这种方法对IE及FIXEFOX都适用！

var gname=documentgetElementById("gname")text;

这句不对。应该是

var gname = documentgetElementById("gname")value;

不过这样，你拿到的只是选中的id，所以这下很麻烦，你用原生的JS还需要

var gnameOptions = documentgetElementById("gname")getElementsByTagName('option');

然后遍历一遍，找出符合的id

for (var i = 0; i < gnameOptionslength; i += 1) {

    if (gnameOptions[i]value === gname) {

        gname = gnameOptions[i]innerHTML;

        break;

    }

}

单选下拉列表框对象的value属性值就是选中项的value值，因此只需用如下代码即可

1

var selected_val = documentgetElementById(select_id)value;

并且，通过 *** 作select下的option也可以得到被选项的value值，方法为：

var sel = documentgetElementById(select_id);

var selected_val = seloptions[selselectedIndex]value;

实例演示如下:

1、HTML结构及javascript代码

<select id="test" onchange="alert(thisvalue)">

<option value="0">options-0</option>

<option value="1">options-1</option>

<option value="2">options-2</option>

</select>

现在有一id=test的下拉框，怎么拿到选中的那个值呢？

分别使用javascript原生的方法和jquery方法

<select id="test"  name="">   

  <option   value="1">text1</option>   

  <option   value="2">text2</option>   

 </select>

code:

一：javascript原生的方法

  1:拿到select对象： var  myselect=documentgetElementById("test");

  2：拿到选中项的索引：var index=myselectselectedIndex ;             // selectedIndex代表的是你所选中项的index

  3:拿到选中项options的value：  myselectoptions[index]value;

  4:拿到选中项options的text：  myselectoptions[index]text;

二：jquery方法（前提是已经加载了jquery库）

1:var options=$("#test option:selected");  //获取选中的项

2:alert(optionsval());   //拿到选中项的值

3:alert(optionstext());   //拿到选中项的文本

在你的代码后添加下面代码，就可以在修改select选择后，得到每个select中的值了。

<div id="output_div"></div>

<script type="text/javascript">

$(function(){

output_func();

$("select")change(output_func);

});

function output_func(){

var str="输出显示为：<br>";

$("tr")each(function(){

$(this)find("td")each(function(){

str+="<span style='border:1px solid blue;'>"+$(this)find("select")val()+"</span> ";

});

str+="<br>";

});

$("#output_div")html("<br>" + str);

}

</script>

以上就是关于如何使用JS获取下拉列表框的显示值全部的内容，包括:如何使用JS获取下拉列表框的显示值、JS如何获取动态select值（我写的是点击添加）、如何利用javascript获取表单中select下拉列表中所选中项的值value等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！