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