[英]Dropdown using javascript onchange
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!!";
}
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;
}
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: 另一种方法是修改小提琴环境的代码,并将您的函数显式声明为全局,以便内联事件处理程序可以找到它:
window.changeMessage() {
document.getElementById("message").innerHTML = "Having a Baby!!";
};
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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.