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

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


当前回答

最简单的方法是:

var value = document.getElementById("selectId").value;

其他回答

在更现代的浏览器中,querySelector允许我们使用:checked伪类在一条语句中检索所选选项。从所选选项中,我们可以收集所需的任何信息:

const opt=document.querySelector(“#ddlViewBy选项:选中”);//opt现在是选定的选项,因此console.log(opt.value,'是所选值');console.log(opt.text,“是所选选项的文本”);<select id=“ddlViewBy”><option value=“1”>test1</option><option value=“2”selected=“selected”>test2</option><option value=“3”>test3</option></选择>

初学者可能希望使用NAME属性而不是ID属性访问select中的值。我们知道所有表单元素都需要名称,甚至在获得id之前。

因此,我将添加getElementsByName()解决方案,让新开发人员也能看到。

没有。表单元素的名称需要是唯一的,以便表单在发布后可以使用,但DOM可以允许多个元素共享名称。因此,如果可以,请考虑将ID添加到表单中,或者使用表单元素名称my_nth_select_named_x和my_nth_text_input_named_y显式添加ID。

使用getElementsByName的示例:

var e = document.getElementsByName("my_select_with_name_ddlViewBy")[0];
var strUser = e.options[e.selectedIndex].value;

给定如下所示的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>

Use:

<select id="Ultra" onchange="alert(this.value)">
    <option value="0">Select</option>
    <option value="8">text1</option>
    <option value="5">text2</option>
    <option value="4">text3</option>
</select>

从元素内部访问任何输入/表单字段时,都可以使用“this”关键字。这样就不需要在DOM树中查找表单,然后在表单中查找该元素。

您可以使用querySelector。

E.g.

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

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