如何使用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>
当前回答
我认为您可以将事件侦听器附加到select标记本身,例如:
<script>
document.addEventListener("DOMContentLoaded", (_) => {
document.querySelector("select").addEventListener("change", (e) => {
console.log(e.target.value);
});
});
</script>
在这种情况下,您应该确保所有选项都有一个value属性,并且它们不为空。
其他回答
最简单的方法是:
var value = document.getElementById("selectId").value;
初学者可能希望使用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;
Try
ddlViewBy.value // value
ddlViewBy.selectedOptions[0].text // label
console.log(ddlViewBy.value);console.log(ddlViewBy.selectedOptions[0].text);<select id=“ddlViewBy”><option value=“1”>快乐</option><option value=“2”>树</option><option value=“3”selected=“selected”>朋友</option></选择>
您应该使用querySelector来实现这一点。这也规范了从表单元素获取值的方式。
var dropDownValue=document.querySelector('#ddlViewBy').value;
小提琴:https://jsfiddle.net/3t80pubr/
只需使用
$('#SelectBoxId选项:selected').text();获取列出的文本$('#SelectBoxId').val();用于获取所选索引值