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!!";
}
Claudio Redi
編集された質問 22日 8月 2012 в 8:19
プログラミング
javascript onchange
22日 8月 2012 в 7:27
まだビューはありません
ソリューション

こんな感じでいいんじゃないでしょうか。


<select id="leave" onchange="leaveChange()">
  Get Married
  Have a Baby
  Adopt a Child
  Retire
  Military Leave
  Medical Leave
Claudio Redi
編集した答え 30日 6月 2015 в 11:59
解説 (3)

JSFiddleのスクリプトが独自のスコープ内で実行されているため、動作しません（左のドロップダウンメニュー「"OnLoad"」を参照）。

この問題を回避する1つの方法は、イベントハンドラをjavascript（あるべき場所）でバインドすることです。

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

もうひとつの方法は、fiddle環境用にコードを修正し、関数をグローバルに宣言することで、インラインのイベントハンドラから見つけられるようにすることです。

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

簡単

script 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を表示・非表示にします。

解説 (1)