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

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


当前回答

在更现代的浏览器中,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></选择>

其他回答

使用jQuery:

$('select').val();

只需使用

$('#SelectBoxId选项:selected').text();获取列出的文本$('#SelectBoxId').val();用于获取所选索引值

运行示例:

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更改。

另一种解决方案是:

document.getElementById('elementId').selectedOptions[0].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></选择>