Ich habe ein einfaches Dropdown-Menü und möchte, dass sich die Nachricht zu Have a Baby ändert, wenn der Benutzer Have a Baby auswählt, aber bei jeder anderen Auswahl. Die Nachricht bleibt die gleiche (nichts), aber das funktioniert nicht. Kann jemand bitte helfen. Bitte spielen Sie mit meinem jsfiddle.
Hier ist die 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>
Hier ist die js
function changeMessage() {
document.getElementById("message").innerHTML = "Having a Baby!!";
}
So sollte es gehen
<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](
)Eine kürzere und allgemeinere Version könnte sein
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;
}
Es funktioniert nicht, weil Ihr Skript in JSFiddle innerhalb seines eigenen Bereichs läuft (siehe das "OnLoad" Dropdown auf der linken Seite?).
Eine Möglichkeit, dies zu umgehen ist, Ihre Event-Handler in Javascript (wo es sein sollte) zu binden:
document.getElementById('optionID').onchange = function () {
document.getElementById("message").innerHTML = "Having a Baby!!";
};
Eine andere Möglichkeit ist, Ihren Code für die Fiddle-Umgebung zu ändern und Ihre Funktion explizit als global zu deklarieren, damit sie von Ihrem Inline-Event-Handler gefunden werden kann:
window.changeMessage() {
document.getElementById("message").innerHTML = "Having a Baby!!";
};
einfach
<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>
dieses Beispiel zeigt und versteckt das div, wenn in der Combobox ein bestimmter Wert ausgewählt wurde