如何使用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;
我怀疑这个过程比双线版本更快。我只是想尽可能地整合我的代码。
不幸的是,这仍然会获取两次元素,这并不理想。一个只抓取一次元素的方法会更有用,但我还没有弄清楚,关于用一行代码来实现这一点。
其他回答
下面的代码展示了使用JavaScript从输入/选择字段获取/放置值的各种示例。
源链接
使用Javascript和jQuery演示
<select id="Ultra" onchange="run()"> <!--Call run() function-->
<option value="0">Select</option>
<option value="8">text1</option>
<option value="5">text2</option>
<option value="4">text3</option>
</select><br><br>
TextBox1<br>
<input type="text" id="srt" placeholder="get value on option select"><br>
TextBox2<br>
<input type="text" id="rtt" placeholder="Write Something !" onkeyup="up()">
以下脚本获取所选选项的值并将其放入文本框1
<script>
function run() {
document.getElementById("srt").value = document.getElementById("Ultra").value;
}
</script>
下面的脚本从文本框2中获取一个值,并用其值发出警报
<script>
function up() {
//if (document.getElementById("srt").value != "") {
var dop = document.getElementById("srt").value;
//}
alert(dop);
}
</script>
以下脚本正在从函数调用函数
<script>
function up() {
var dop = document.getElementById("srt").value;
pop(dop); // Calling function pop
}
function pop(val) {
alert(val);
}?
</script>
初学者可能希望使用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;
有一个解决方法,使用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必须获得其他值,因此它必须是可能的。
如果您不想看到任何插件,请尽可能缩小它?或者在上面的链接中找到一个根本不需要表单的插件,我只是没有花时间。
这里的大多数答案通过纯文本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>
只需执行:document.getElementById('dselect').options.selectedIndex
然后,您将获得从0开始的select索引值。