如何使用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>
当前回答
下面的代码展示了使用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>
其他回答
只需执行:document.getElementById('dselect').options.selectedIndex
然后,您将获得从0开始的select索引值。
如果您遇到过纯为Internet Explorer编写的代码,您可能会看到:
var e = document.getElementById("ddlViewBy");
var strUser = e.options(e.selectedIndex).value;
在Firefox等中运行上述命令会导致“不是函数”错误,因为Internet Explorer允许您使用()而不是[]:
var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;
正确的方法是使用方括号。
我不知道我是不是那个没有正确回答问题的人,但这对我很有用:
例如,在HTML中使用onchange()事件。
<select id="numberToSelect" onchange="selectNum()">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
JavaScript
function selectNum() {
var strUser = document.getElementById("numberToSelect").value;
}
这将为您提供每次单击时选择下拉列表中的任何值。
纯JavaScript:
var e = document.getElementById("elementId");
var value = e.options[e.selectedIndex].value;
var text = e.options[e.selectedIndex].text;
jQuery:
$("#elementId :selected").text(); // The text content of the selected option
$("#elementId").val(); // The value of the selected option
角度JS:(http://jsfiddle.net/qk5wwyct):
// HTML
<select ng-model="selectItem" ng-options="item as item.text for item in items">
</select>
<p>Text: {{selectItem.text}}</p>
<p>Value: {{selectItem.value}}</p>
// JavaScript
$scope.items = [{
value: 'item_1_id',
text: 'Item 1'
}, {
value: 'item_2_id',
text: 'Item 2'
}];
有两种方法可以使用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'