如何使用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>
当前回答
另一种解决方案是:
document.getElementById('elementId').selectedOptions[0].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”>单一选项</选择>
是的,片段奏效了。
var selectedValue = document.getElementById("ddlViewBy").value;
您应该使用querySelector来实现这一点。这也规范了从表单元素获取值的方式。
var dropDownValue=document.querySelector('#ddlViewBy').value;
小提琴:https://jsfiddle.net/3t80pubr/
按照前面的回答,这是我作为一个单线图的方式。这用于获取所选选项的实际文本。已经有一些很好的例子可以获取索引编号。(对于文本,我只是想展示一下)
let selText = document.getElementById('elementId').options[document.getElementById('elementId').selectedIndex].text
在一些罕见的情况下,您可能需要使用括号,但这非常罕见。
let selText = (document.getElementById('elementId')).options[(document.getElementById('elementId')).selectedIndex].text;
我怀疑这个过程比双线版本更快。我只是想尽可能地整合我的代码。
不幸的是,这仍然会获取两次元素,这并不理想。一个只抓取一次元素的方法会更有用,但我还没有弄清楚,关于用一行代码来实现这一点。
我认为您可以将事件侦听器附加到select标记本身,例如:
<script>
document.addEventListener("DOMContentLoaded", (_) => {
document.querySelector("select").addEventListener("change", (e) => {
console.log(e.target.value);
});
});
</script>
在这种情况下,您应该确保所有选项都有一个value属性,并且它们不为空。