シンプルなドロップダウンで、ユーザーが「赤ちゃんを産む」を選択した場合、メッセージが「赤ちゃんを産む」に変わるようにしたいのですが、それ以外の選択の場合はどうなるのでしょうか。 メッセージは同じ(何もない)ままですが、これではうまくいきません。 誰か助けてくれませんか? 私のjsfiddleで遊んでください。
以下はその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!!";
}
こんな感じでいいんじゃないでしょうか。
<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 {{14611823}}
function leaveChange(control) {
var msg = control.value == "100" ? "Having a Baby!!" : "Common message";
document.getElementById("message").innerHTML = msg;
}
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!!";
};
簡単
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を表示・非表示にします。