如何使用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>
当前回答
使用jQuery:
$('select').val();
其他回答
运行示例:
var e=document.getElementById(“ddlViewBy”);var val1=e.options[e.selectedIndex].value;var txt=e.options[e.selectedIndex].text;document.write(“<br/>所选选项值:”+val1);document.write(“<br/>所选选项文本:”+txt);<select id=“ddlViewBy”><option value=“1”>test1</option><option value=“2”>test2</option><option value=“3”selected=“selected”>test3</option></选择>
注意:下拉列表更改时,值不会更改,如果您需要该功能,则需要执行onClick更改。
使用jQuery:
$('select').val();
下面的代码展示了使用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>
有两种方法可以使用JavaScript或jQuery完成此操作。
JavaScript:
var getValue = document.getElementById('ddlViewBy').selectedOptions[0].value;
alert (getValue); // This will output the value selected.
OR
var ddlViewBy = document.getElementById('ddlViewBy');
var value = ddlViewBy.options[ddlViewBy.selectedIndex].value;
var text = ddlViewBy.options[ddlViewBy.selectedIndex].text;
alert (value); // This will output the value selected
alert (text); // This will output the text of the value selected
jQuery:
$("#ddlViewBy:selected").text(); // Text of the selected value
$("#ddlViewBy").val(); // Outputs the value of the ID in 'ddlViewBy'
这里的大多数答案通过纯文本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>