如何使用JavaScript从下拉列表中获取所选值?

<表单><select id=“ddlViewBy”><option value=“1”>test1</option><option value=“2”selected=“selected”>test2</option><option value=“3”>test3</option></选择></form>


当前回答

有两种方法可以使用JavaScript或jQuery完成此操作。

JavaScript:

var getValue = document.getElementById('ddlViewBy').selectedOptions[0].value;

alert (getValue); // This will output the value selected.

OR

var ddlViewBy = document.getElementById('ddlViewBy');

var value = ddlViewBy.options[ddlViewBy.selectedIndex].value;

var text = ddlViewBy.options[ddlViewBy.selectedIndex].text;

alert (value); // This will output the value selected

alert (text); // This will output the text of the value selected

jQuery:

$("#ddlViewBy:selected").text(); // Text of the selected value

$("#ddlViewBy").val(); // Outputs the value of the ID in 'ddlViewBy'

其他回答

2015年,在Firefox中,以下功能同样有效。

e.options.selected索引

您可以使用querySelector。

E.g.

var myElement = document.getElementById('ddlViewBy');

var myValue = myElement.querySelector('[selected]').value;

制作一个包含多个选项的下拉菜单(根据需要选择多个!)

<select>
  <option value="giveItAName">Give it a name
  <option value="bananaShark">Ridiculous animal
  <ooption value="Unknown">Give more options!
</select>

我把它弄得有点滑稽。

下面是代码段:

<选择><option value=“RidicousObject”>香蕉鲨<option value=“SuperDuperCoding”>选择标记和选项标记!<option value=“未知”>添加更多标签以添加更多选项!</选择><h1>仅1个选项(无用)</h1><选择><option value=“Single”>单一选项</选择>

是的,片段奏效了。

给定如下所示的select元素:

<select id="ddlViewBy">
  <option value="1">test1</option>
  <option value="2" selected="selected">test2</option>
  <option value="3">test3</option>
</select>

运行此代码:

var e = document.getElementById("ddlViewBy");
var value = e.value;
var text = e.options[e.selectedIndex].text;

结果如下:

value == 2
text == "test2"

交互示例:

var e=document.getElementById(“ddlViewBy”);函数onChange(){var值=e.value;var text=e.options[e.selectedIndex].text;console.log(值,文本);}e.onchange=onchange;onChange();<表单><select id=“ddlViewBy”><option value=“1”>test1</option><option value=“2”selected=“selected”>test2</option><option value=“3”>test3</option></选择></form>

运行示例:

var e=document.getElementById(“ddlViewBy”);var val1=e.options[e.selectedIndex].value;var txt=e.options[e.selectedIndex].text;document.write(“<br/>所选选项值:”+val1);document.write(“<br/>所选选项文本:”+txt);<select id=“ddlViewBy”><option value=“1”>test1</option><option value=“2”>test2</option><option value=“3”selected=“selected”>test3</option></选择>

注意:下拉列表更改时,值不会更改,如果您需要该功能,则需要执行onClick更改。