Javascript 如何在javascript函数中读取html下拉菜单的所选项目的值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8767946/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to read the selected item's value of a html dropdown menu in a javascript function
提问by Zack
I have a form in html that contains a drop down menu like so
我有一个 html 表单，其中包含一个下拉菜单，如下所示
<form name= "gadget_selector">
<select name= "gadget">
<option value = 0> Something </option>
<option value = 1> Something else </option>
//etc..
</select>
</form>
And I want to access the value of the selected option in a javascript function like so
我想在这样的 javascript 函数中访问所选选项的值
function someFunction(){
//var option = value of selected menu option
}
How would I do this?
我该怎么做？
回答by xbonez
var option = document.getElementById('gadget').value;
Set gadgetas the idfor the select as well, like this:
也设置gadget为idselect ，如下所示：
<select id="gadget" name="gadget">
<option value = 0> Something </option>
<option value = 1> Something else </option>
//etc..
</select>
回答by Zack
assign idto select box"gadget":
分配id给select box“小工具”：
<select name= "gadget" id="gadget">
<option value = 0> Something </option>
<option value = 1> Something else </option>
//etc..
</select>
Now get selected value in javascript like below :
现在在 javascript 中获取选定的值，如下所示：
function GetSelectedItem() {
var option = document.getElementById('gadget').value;
}
回答by dku.rajkumar
Include an idattributeto select element and do as below, i am sure i will work,
包含一个idattributeto select 元素并按如下操作，我相信我会工作，
var obj = document.getElementById("gadget");
alert(obj.value); // returns selected option value (1st method)
var selectedOption = obj.options[obj.selectedIndex]; // returns selected option element
alert(selectedOption.value); // return selected option value (2nd method)
example : http://jsfiddle.net/zUBpz/
回答by Bhavesh Gangani
here forms[0] is the form number starting from 0 from top to bottom of page
这里的 forms[0] 是从页面顶部到底部从 0 开始的表单编号
function someFunction(){
var option = window.document.forms[0].gadget.value;
}
回答by Alex
Old question, but maybe other people get here like me so I'll add my solution:
老问题，但也许其他人像我一样来到这里，所以我会添加我的解决方案：
The cleanest approach would be to have a reference to the selectfield, have the selectbacked by a model and add a watcher like this:
最干净的方法是引用该select字段，select由模型支持并添加一个像这样的观察者：
<script>
export default {
name: 'MyComponent',
data() {
return {
myValueName: 123
};
},
watch: {
myValueName() {
//
// Will log "Value: 123" and "Value: 456" instead of
// "123" and "456".
//
console.log(this.$refs['mySelectRef'].selectedOptions[0].text);
}
}
}
</script>
<template>
<select ref="mySelectRef" v-model="myValueName">
<option :value="123">Value: 123</option>
<option :value="456">Value: 456</option>
</select>
</template>
<style>
</style>
回答by Sergio Tulentsev
First, assign an id to your <select>tag.
首先，为您的<select>标签分配一个 id 。
<select id='gadget' name= "gadget">
Then, get its value
然后，得到它的价值
if (document.getElementById('gadget')) {
var val = document.getElementById('gadget').value;
alert(val);
}
回答by Bajrang
You can access by id, like this:=
您可以通过 id 访问，如下所示：=
<form name= "gadget_selector" >
<select name= "gadget" id='sel'>
<option value = 0> Something </option>
<option value = 1> Something else </option>
//etc..
</select>
</form>
function getvalue(){
if(document.getElementById('sel'))
{
alert(document.getElementById('sel').value);
var option = document.getElementById('sel').value;
}
}
