javascript - opciones - tabla desplegable bootstrap

Desplegable 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 funciona. Puede ayudarme alguien, por favor. Por favor juega con mi jsfiddle.

http://jsfiddle.net/Z9YJR/ 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>

Aqui esta el js

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

Answer 1

Algo como esto debería 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 su script en JSFiddle se está ejecutando dentro de su propio ámbito (¿ve el menú desplegable "OnLoad" a la izquierda?).

Una forma de solucionar esto es enlazar su controlador de eventos en javascript (donde debería estar):

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

Otra forma es modificar su código para el entorno de violín y declarar explícitamente su función como global para que su controlador de eventos en línea pueda encontrarla:

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

En

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 se selecciona en el cuadro combinado algún valor específico