如何使用JavaScript从下拉列表中获取所选值?
<表单><select id=“ddlViewBy”><option value=“1”>test1</option><option value=“2”selected=“selected”>test2</option><option value=“3”>test3</option></选择></form>
如何使用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></选择>
其他回答
var strUser = e.options[e.selectedIndex].value;
这是正确的,应该为您提供值。是你想要的文本吗?
var strUser = e.options[e.selectedIndex].text;
所以你对术语很清楚:
<select>
<option value="hello">Hello World</option>
</select>
此选项具有:
索引=0值=hello文本=你好世界
在onchange函数中有一个简单的方法:
event.target.options[event.targets.selectedIndex].dataset-name
<select name="test" id="test" >
<option value="1" full-name="Apple">A</option>
<option value="2" full-name="Ball">B</option>
<option value="3" full-name="Cat" selected>C</option>
</select>
var obj = document.getElementById('test');
obj.options[obj.selectedIndex].value; //3
obj.options[obj.selectedIndex].text; //C
obj.options[obj.selectedIndex].getAttribute('full-name'); //Cat
obj.options[obj.selectedIndex].selected; //true
您可以使用querySelector。
E.g.
var myElement = document.getElementById('ddlViewBy');
var myValue = myElement.querySelector('[selected]').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></选择>