web-dev-qa-db-ja.com

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!!";
}
javascriptonchange
22
John Doe

このような何かがトリックを行う必要があります

<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;
}
42
Claudio Redi

JSFiddleのスクリプトは独自のスコープ内で実行されているため機能しません（左側の「OnLoad」ドロップダウンを参照してください）。

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

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

もう1つの方法は、フィドル環境用にコードを変更し、関数をグローバルとして明示的に宣言して、インラインイベントハンドラーで検出できるようにすることです。

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

3
jbabey

かんたん

<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を表示および非表示にします

3
offboard