Dropdown usando javascript onchange

Question

Tengo un menú desplegable simple y quiero tenerlo para que, si el usuario selecciona Tener un bebé, el mensaje cambie a Tener un bebé, pero para cualquier otra selección. El mensaje permanece igual (nada), pero esto no está funcionando. Puede ayudarme alguien, por favor. Por favor juega con mi jsfiddle.

http://jsfiddle.net/Z9YJR/ Aquí es 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í es el js

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

Answer 1

Algo como esto debe hacer el truco

<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; 
} 

Answer 2

No funciona porque la secuencia de comandos en JSFiddle se ejecuta dentro de su propio ámbito (consulte el menú desplegable "OnLoad" a la izquierda?).

Una forma de evitar esto es para vincular a su controlador de eventos en javascript (donde debe estar):

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

Otra forma es modificar el código para el medio ambiente violín y explícitamente declarar su función como global, de modo que se pueden encontrar en línea por su controlador de eventos:

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

Answer 3

fácil

<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 está seleccionado en cuadro combinado algún valor específico