如何使用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>
当前回答
按照前面的回答,这是我作为一个单线图的方式。这用于获取所选选项的实际文本。已经有一些很好的例子可以获取索引编号。(对于文本,我只是想展示一下)
let selText = document.getElementById('elementId').options[document.getElementById('elementId').selectedIndex].text
在一些罕见的情况下,您可能需要使用括号,但这非常罕见。
let selText = (document.getElementById('elementId')).options[(document.getElementById('elementId')).selectedIndex].text;
我怀疑这个过程比双线版本更快。我只是想尽可能地整合我的代码。
不幸的是,这仍然会获取两次元素,这并不理想。一个只抓取一次元素的方法会更有用,但我还没有弄清楚,关于用一行代码来实现这一点。
其他回答
有一个解决方法,使用EasyUI框架及其所有插件。
您只需要在下拉菜单中添加一些EasyUI对象,该对象可以作为“桥”从输入中读取。
示例:easyui搜索框
左边是下拉列表,右边是easyui搜索框:
...
<input id="ss" class="easyui-searchbox" style="width:300px"
data-options=" searcher:my_function,
prompt:'Enter value',
menu:'#mm'">
<div id="mm" style="width:200px">
<div data-options="name:'1'">test1</div>
<div data-options="name:'2'">test2</div>
</div>
...
...
<script type="text/javascript">
function my_js_function(triggeredByButton = false){
// normal text of the searchbox (what you entered)
var value = $("#ss").searchbox("getValue");
// what you chose from the drop-down menu
var name = $("#ss").searchbox("getName");
...
注意:var名称是“1”或“2”,即“下拉列表的值”,而var值是在easyui搜索框中输入的值,如果您只想知道下拉列表的数值,则不相关。
我检查了EasyUI如何获取这个#mm名称,如果没有EasyUI的帮助,我无法找到如何获取这个名称。getName后面的jQuery:
getName:function(jq){
return $.data(jq[0],"searchbox").searchbox.find("input.textbox-value").attr("name");
}
注意,此函数的返回不是easyui搜索框的值,而是用作easyui查询框菜单参数的#mm下拉列表的名称。不知何故,EasyUI必须获得其他值,因此它必须是可能的。
如果您不想看到任何插件,请尽可能缩小它?或者在上面的链接中找到一个根本不需要表单的插件,我只是没有花时间。
另一种解决方案是:
document.getElementById('elementId').selectedOptions[0].value
这里的大多数答案通过纯文本JavaScript选择器获取“this”select菜单的值。
例如:
document.getElementById("ddlViewBy").value;
这不是干式方法。
DRY(三行代码):
function handleChange(e) {
let innerText = e.target[e.target.options.selectedIndex].innerText;
let value = e.target.value;
/* Do something with these values */
}
获取第一个选择选项:
console.log(e.target[0]); /* Output: <option value="value_hello">Hello innerText</option>*/
考虑到这个想法,我们动态返回一个“this”选择选项项(通过selectedIndex):
e.target[e.target.options.selectedIndex].innerText;
Demo
let log=document.getElementById('log');函数句柄更改(e){let innerText=e.target[e.target.options.selectedIndex].innerText;let value=e.target.value;log.innerHTML=`<table><tr><th>值</th><th>innerText</th></tr><tr><td>${value}</td><td>${innerText}</td></tr></table>`;}<link rel=“stylesheet”href=“https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css"><select id=“greet”onchange=“handleChange(event)”><option value=“value_hello”>hello innerText</option><option value=“value_goodbye”>再见innerText</option><option value=“value_seeYou”>再见。。。innerText</option></选择><select id=“other_select_menu”onchange=“handleChange(event)”><option value=“value_paris”>paris innerText</option><option value=“value_ny”>纽约innerText</option></选择><div id=“log”></div>
按照前面的回答,这是我作为一个单线图的方式。这用于获取所选选项的实际文本。已经有一些很好的例子可以获取索引编号。(对于文本,我只是想展示一下)
let selText = document.getElementById('elementId').options[document.getElementById('elementId').selectedIndex].text
在一些罕见的情况下,您可能需要使用括号,但这非常罕见。
let selText = (document.getElementById('elementId')).options[(document.getElementById('elementId')).selectedIndex].text;
我怀疑这个过程比双线版本更快。我只是想尽可能地整合我的代码。
不幸的是,这仍然会获取两次元素,这并不理想。一个只抓取一次元素的方法会更有用,但我还没有弄清楚,关于用一行代码来实现这一点。
只需执行:document.getElementById('dselect').options.selectedIndex
然后,您将获得从0开始的select索引值。