使用javascript onchange下拉列表

Question

我有一個簡單的下拉菜單，我想擁有它，以便如果用戶選擇擁有一個嬰兒，該消息將更改為“有一個嬰兒”，但對於任何其他選擇。 消息保持不變（沒有），但這不起作用。 有人可以請幫助。 請和我的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!!";
}

Answer 1

這樣的事情應該可以解決問題

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

Answer 2

它不起作用，因為JSFiddle中的腳本在其自己的范圍內運行（請參閱左側的“OnLoad”下拉列表？）。

解決此問題的一種方法是在javascript中綁定您的事件處理程序（它應該在哪里）：

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

另一種方法是修改小提琴環境的代碼，並將您的函數顯式聲明為全局，以便內聯事件處理程序可以找到它：

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

Answer 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