我有一个简单的下拉菜单,我想让它在用户选择 "生孩子 "时,信息会变成 "生孩子",但对于任何其他的选择。 信息保持不变(没有什么),但这并不奏效。 谁能帮帮我。 请玩玩我的jsfiddle。
这里是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>
这里是js
function changeMessage() {
document.getElementById("message").innerHTML = "Having a Baby!!";
}
像这样的东西应该能起到作用
<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
function leaveChange() {
if (document.getElementById("leave").value != "100"){
document.getElementById("message").innerHTML = "Common message";
}
else{
document.getElementById("message").innerHTML = "Having a Baby!!";
}
}
[jsFiddle演示](
)一个更短的版本和更普遍的版本可以是
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
function leaveChange(control) {
var msg = control.value == "100" ? "Having a Baby!!" : "Common message";
document.getElementById("message").innerHTML = msg;
}
它不起作用,因为你在JSFiddle中的脚本是在它自己的范围内运行的(见左边的"OnLoad"下拉)。
一个解决这个问题的方法是在javascript中绑定你的事件处理程序(它应该在那里)。
document.getElementById('optionID').onchange = function () {
document.getElementById("message").innerHTML = "Having a Baby!!";
};
另一个方法是为fiddle环境修改你的代码,并明确声明你的函数是全局的,这样它就可以被你的内联事件处理程序找到。
window.changeMessage() {
document.getElementById("message").innerHTML = "Having a Baby!!";
};
容易
<脚本 src="js/libs/jquery-1.8.3.min.js"></script>。
<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>
本例中,如果在组合框中选择了某个特定的值,就会显示和隐藏这个div。