javascript onchangeを使用したドロップダウン

Question

私は単純なドロップダウンを持っています。ユーザーがHave a Babyを選択すると、Have a Babyにメッセージが変更されます。メッセージは同じ（何も）変わりませんが、これは機能しません。誰かが助けてくれますか？私の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> 

である。このような

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> 

を行う必要がjsのあるJavascriptの

function leaveChange() { 
    if (document.getElementById("leave").value != "100"){ 
     document.getElementById("message").innerHTML = "Common message"; 
    }  
    else{ 
     document.getElementById("message").innerHTML = "Having a Baby!!"; 
    }   
} 

短いバージョンと、より一般的には、HTML

function leaveChange(control) { 
    var msg = control.value == "100" ? "Having a Baby!!" : "Common message"; 
    document.getElementById("message").innerHTML = msg; 
} 

Javascriptを

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

可能性があり3210

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> 

この例では、コンボボックスでは、いくつかの特定の値