Tengo un simple desplegable y quiero que si el usuario selecciona Tener un bebé el mensaje cambie a Tener un bebé, pero para cualquier otra selección. El mensaje se queda igual (nada), pero esto no está funcionando. ¿Puede alguien ayudar, por favor? Por favor, juega con mi jsfiddle.
Aquí está el 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>
Aquí está el js
function changeMessage() {
document.getElementById("message").innerHTML = "Having a Baby!!";
}
Algo como esto debería funcionar
<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](
)Una versión más corta y más general podría ser
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;
}
No funciona porque tu script en JSFiddle se ejecuta dentro de su propio ámbito (ver el "OnLoad" desplegable de la izquierda?).
Una forma de evitar esto es enlazar tu manejador de eventos en javascript (donde debería estar):
document.getElementById('optionID').onchange = function () {
document.getElementById("message").innerHTML = "Having a Baby!!";
};
Otra forma es modificar tu código para el entorno fiddle y declarar explícitamente tu función como global para que pueda ser encontrada por tu manejador de eventos en línea:
window.changeMessage() {
document.getElementById("message").innerHTML = "Having a Baby!!";
};
fácil
<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>
este ejemplo muestra y oculta el div si se selecciona en combobox algún valor específico