使用javascript onchange下拉列表

时间:2012-08-22 19:27:42

标签: javascript onchange

我有一个简单的下拉菜单,我想拥有它,以便如果用户选择拥有婴儿,则消息将更改为“有婴儿”,但是对于任何其他选择。消息保持不变(没有),但这不起作用。有人可以请帮助。请和我的jsfiddle一起玩。

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>

这是js

function changeMessage() {
    document.getElementById("message").innerHTML = "Having a Baby!!";
}

3 个答案:

答案 0 :(得分:42)

这样的事情可以解决问题

<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 Demo

更短的版本,更通用的可能是

<强> 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;
}

答案 1 :(得分:3)

它不起作用,因为JSFiddle中的脚本在其自己的范围内运行(请参阅左侧的“OnLoad”下拉列表?)。

解决此问题的一种方法是在javascript中绑定您的事件处理程序(它应该在哪里):

document.getElementById('optionID').onchange = function () {
    document.getElementById("message").innerHTML = "Having a Baby!!";
};

另一种方法是修改你的小提琴环境的代码,并明确地将你的函数声明为全局,这样你的内联事件处理程序就可以找到它:

window.changeMessage() {
    document.getElementById("message").innerHTML = "Having a Baby!!";
};

答案 2 :(得分:3)

<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,如果在组合框中选择某个特定值