将选定的值从 <select> HTML 标记传递到 JAVASCRIPT
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18055947/
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
Pass selected value from <select> HTML markup to JAVASCRIPT
提问by user1735120
How can i get the value of the <select>markup in my html and pass it on my javascript.
如何<select>在我的 html 中获取标记的值并将其传递给我的 javascript。
when i select redit should display my <div id="red">im new to JS, so im not sure if i got the correct syntax.
当我选择red它时，它应该显示我<div id="red">对 JS 的新手，所以我不确定我是否得到了正确的语法。
HTML
HTML
<select>
<option name="choice1" value="red" onclick="color(this.value)">red</option>
<option name="choice2" value="blue" onclick="color(this.value)">blue</option>
</select>
<div id="red" style="display:none;">
<p>You want RED</p>
</div>
<div id="blue" style="display:none;">
<p>You want BLUE</p>
</div>
JAVASCRIPT
爪哇脚本
function color(color_type){
if (color_type == 'blue'){
document.getElementById('blue').style.display = 'block';
document.getElementById('red').style.display = 'none';
}
else{
document.getElementById('blue').style.display = 'none';
document.getElementById('red').style.display = 'block';
}
}
回答by BitHigher
You should use onchangeevent instead of onclick, besides, the event should set to select instead of option following is correct code
您应该使用onchangeevent 而不是onclick，此外，事件应该设置为 select 而不是 option 以下是正确的代码
<script>
function color(color_type){
if (color_type == 'blue'){
document.getElementById('blue').style.display = 'block';
document.getElementById('red').style.display = 'none';
}
else{
document.getElementById('blue').style.display = 'none';
document.getElementById('red').style.display = 'block';
}
}
</script>
<select onchange="color(this.value)">
<option name="choice1" value="red" >red</option>
<option name="choice2" value="blue" >blue</option>
</select>
<div id="red" style="display:none;">
<p>You want RED</p>
</div>
<div id="blue" style="display:none;">
<p>You want BLUE</p>
</div>
Hope Helps!
希望有帮助！
回答by user1735120
<select onchange="color(event)">
<option name="choice1" value="red" >red</option>
<option name="choice2" value="blue" >blue</option>
</select>
function color(e){
var color=e.target.options[e.target.selectedIndex].value;
var blueDiv=document.getElementById('blue');
var redDiv=document.getElementById('red');
switch(color){
case 'blue':
blueDiv.style.display = 'block';
redDiv.style.display = 'none';
break;
case 'red':
redDiv.style.display = 'block';
blueDiv.style.display = 'none';
break;
default:
redDiv.style.display = 'none';
blueDiv.style.display = 'none';
break;
}
}
回答by sjv
You can get the selected value by using "value" method on "select" element object. For below html you can get the value of select tag by document.getElementById("color").value
您可以通过在“select”元素对象上使用“value”方法来获取选定的值。对于下面的 html，您可以通过 document.getElementById("color").value 获取 select 标签的值
<body>
<select id="color">
<option value="red">red</option>
<option value="blue">blue</option>
</select>
<div id="red" style="display:none;">
<p>You want RED</p>
</div>
<div id="blue" style="display:none;">
<p>You want BLUE</p>
</div>
</body>
Heres how I have written my js :
这是我如何编写我的 js ：
<script>
window.addEventListener("load", function() {
document.getElementById("color").addEventListener("change", function() {
var selectElem = document.getElementById("color");
document.getElementById("red").style.display = "none";
document.getElementById("blue").style.display = "none";
document.getElementById(selectElem.value).style.display = "block";
})
})
</script>
Tip : Always try to implement DRY(Dont repeat your code) code.
提示：始终尝试实现 DRY（不要重复您的代码）代码。
The above code will not work in IE8 or below. IE8 and below browsers supports attachEvent() method. We can create our own custom event handler method that will work for cross browsers.
上面的代码在 IE8 或更低版本中不起作用。IE8 及以下浏览器支持 attachEvent() 方法。我们可以创建自己的自定义事件处理程序方法，该方法适用于跨浏览器。
function addHandler(element, type, handler) {
alert("Hi");
if(element.addEventListener) {
element.addEventListener(type, handler, false);
} else if(element.attachEvent) {
element.attachEvent("on"+type, handler)
} else {
element["on"+type] = handler };
}
addHandler(window, "load", main)
function main() {
function handler() {
var selectElem = document.getElementById("color");
document.getElementById("red").style.display = "none";
document.getElementById("blue").style.display = "none";
document.getElementById(selectElem.value).style.display = "block";
}
addHandler(document.getElementById("color"), "change", handler);
}
I have created a custom addHandler() function that will work for all IE's, chrome, firefox, opera and safari.
我创建了一个自定义 addHandler() 函数，它适用于所有 IE、chrome、firefox、opera 和 safari。
回答by Abhitalks
Set the handler on your select instead of option:
在您的选择而不是选项上设置处理程序：
<select ... onclick="color(this.value)" >...
