23

シンプルなドロップダウンがあり、ユーザーが [赤ちゃんを産む] を選択すると、メッセージが [赤ちゃんを産む] に変わりますが、それ以外の選択の場合はそれが必要です。メッセージは同じ (何もない) ままですが、これは機能していません。誰か助けてください。私の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!!";
}
4

3 に答える 3

48

このような何かがうまくいくはずです

<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;
}
于 2012-08-22T19:31:47.543 に答える
4

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

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

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

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

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

</p>

于 2012-08-22T19:40:36.510 に答える