使用 javascript onchange 下拉
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12080098/
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
Dropdown using javascript onchange
提问by John Doe
I have a simple drop down and I want to have it so that if the user selects Have a Baby the message changes to Have a Baby, but for any other selection. The message stays the same (nothing), but this isn't working. Can someone please help. Please play with my jsfiddle.
我有一个简单的下拉菜单，我想拥有它，以便如果用户选择“生孩子”，消息将更改为“生孩子”，但对于任何其他选择。消息保持不变（没有），但这不起作用。有人可以帮忙吗。请玩我的jsfiddle。
http://jsfiddle.net/Z9YJR/Here is the html
http://jsfiddle.net/Z9YJR/这是 html
<select id="leave">
<option value="5">Get Married</option>
<option onchange="changeMessage()" value="100">Have a Baby</option>
<option value="90">Adopt a Child</option>
<option value="15">Retire</option>
<option value="15">Military Leave</option>
<option value="15">Medical Leave</option>
</select>
<div id="message"></div>
Here is the js
这是js
function changeMessage() {
document.getElementById("message").innerHTML = "Having a Baby!!";
}
回答by Claudio Redi
Something like this should do the trick
像这样的事情应该可以解决问题
<select id="leave" onchange="leaveChange()">
<option value="5">Get Married</option>
<option value="100">Have a Baby</option>
<option value="90">Adopt a Child</option>
<option value="15">Retire</option>
<option value="15">Military Leave</option>
<option value="15">Medical Leave</option>
</select>
<div id="message"></div>
Javascript
Javascript
function leaveChange() {
if (document.getElementById("leave").value != "100"){
document.getElementById("message").innerHTML = "Common message";
}
else{
document.getElementById("message").innerHTML = "Having a Baby!!";
}
}
A shorter version and more general could be
更短的版本和更通用的可能是
HTML
HTML
<select id="leave" onchange="leaveChange(this)">
<option value="5">Get Married</option>
<option value="100">Have a Baby</option>
<option value="90">Adopt a Child</option>
<option value="15">Retire</option>
<option value="15">Military Leave</option>
<option value="15">Medical Leave</option>
</select>
Javascript
Javascript
function leaveChange(control) {
var msg = control.value == "100" ? "Having a Baby!!" : "Common message";
document.getElementById("message").innerHTML = msg;
}
回答by jbabey
It does not work because your script in JSFiddle is running inside it's own scope (see the "OnLoad" drop down on the left?).
它不起作用，因为您在 JSFiddle 中的脚本正在它自己的范围内运行（请参阅左侧的“OnLoad”下拉菜单？）。
One way around this is to bind your event handler in javascript (where it should be):
解决此问题的一种方法是在 javascript 中绑定您的事件处理程序（它应该在哪里）：
document.getElementById('optionID').onchange = function () {
document.getElementById("message").innerHTML = "Having a Baby!!";
};
Another way is to modify your code for the fiddle environment and explicitly declare your function as global so it can be found by your inline event handler:
另一种方法是修改 fiddle 环境的代码并显式声明您的函数为全局函数，以便您的内联事件处理程序可以找到它：
window.changeMessage() {
document.getElementById("message").innerHTML = "Having a Baby!!";
};
?
?
回答by offboard
easy
简单
<script>
jQuery.noConflict()(document).ready(function() {
$('#hide').css('display','none');
$('#plano').change(function(){
if(document.getElementById('plano').value == 1){
$('#hide').show('slow');
}else
if(document.getElementById('plano').value == 0){
$('#hide').hide('slow');
}else
if(document.getElementById('plano').value == 0){
$('#hide').css('display','none');
}
});
$('#plano').change();
});
</script>
this example shows and hides the div if selected in combobox some specific value
如果在组合框中选择某个特定值，此示例将显示和隐藏 div
