jQuery: mostrar un elemento del menú desplegable de selección, ocultarlo cuando se seleccionó otra opción

He intentado buscar y hay problemas similares, pero el mío es mucho más simple, pero aún así, no encuentro una solución dentro de estos foros.jQuery: mostrar un elemento del menú desplegable de selección, ocultarlo cuando se seleccionó otra opción

Al aprender jQuery, intento mostrar un DIV cuando se selecciona un elemento/opción de un menú desplegable de selección, y ocultar ese mismo DIV cuando se selecciona cualquier otra opción en el menú desplegable de selección.

seleccione HTML:

<select name="source" id="source"> 
    <option value="null" selected="selected">&mdash;Select&mdash;</option> 
    <option value="s1">Source 1</option> 
    <option value="s2">Source 2</option> 
    <option value="sother">Other</option> 
</select>

DIV tengo que mostrar al 'otro' es seleccionado:

<div id="specify-source">Other source here...</div>

Cuando se selecciona cualquier otra opción en el menú de selección, el DIV anterior no debe se visible.

He intentado esto jQuery pero por supuesto no funciona correctamente:

$(function() { 
$.viewMap = { 
    'sother' : $('#specify-source') 
    };  
    $('#source').change(function() { 
    // hide all 
    $.each($.viewMap, function() { this.hide(); }); 
    // show current 
    $.viewMap[$(this).val()].show(); 
    }); 
});

Cualquier ayuda que me puedan dar, se lo agradecería muchísimo.

Gracias,

Fuente

2010-04-16 Ricardo Zea

veo lo que estás tratando de hacer con la vista del mapa. Simplificarlo con:

$('#source').change(function() { 
    ($(this).val() == "sother") ? $('#specify-source').show() : $('#specify-source').hide(); 
});

Fuente

2010-04-16 21:02:32 Amit

Ya que soy nuevo en stackoverflow.com no puedo votar, pero esta respuesta trabajó inmediatamente. Muchas gracias Amit, lo agradezco mucho. Gracias a las otras personas por su ayuda. –

Hecho, puedo votar ahora :) –

Heh, gracias por regresar. – Amit

Ésta es la forma más sencilla de ocultar un elemento:

$('.target').hide();

Y aquí es un ejemplo de mostrar y ocultar jQuery:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
div { background:#def3ca; margin:3px; width:80px; 
display:none; float:left; text-align:center; } 
</style> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
</head> 
<body> 

<button id="showr">Show</button> 
<button id="hidr">Hide</button> 
<div>Hello 3,</div> 

<div>how</div> 
<div>are</div> 
<div>you?</div> 
<script> 
$("#showr").click(function() { 
$("div:eq(0)").show("fast", function() { 
/* use callee so don't have to name the function */ 
$(this).next("div").show("fast", arguments.callee); 
}); 
}); 
$("#hidr").click(function() { 
$("div").hide(2000); 
}); 

</script> 
</body> 
</html>

Fuente

2010-04-16 20:50:38 regina

más simple:

$(function() { 
$("#specify-source").hide(); 

$("#source").change(function(){ 
    if ($(this).val() == "sother") 
     $("#specify-source").show(); 
    else 
     $("#specify-source").hide(); 
    }); 
});

Fuente

2010-04-16 21:01:17 Glennular

Ignorando su punto de vista m ap, aquí tienes:

$("#source").change(function() { 
    var foo = false; 
    $("#source option:selected").each(function() { if ($(this).val() == "sother") foo = true; }); 
    if (foo) $('#specify-source').show(); else $('#specify-source').hide(); 
}).change();

¿Quieres que incluya todo con tu código?

Otros métodos publicados funcionará tan bien, pero no funcionarán con pero no se encargará de un selecto con múltiples @ = "múltiple"

Fuente

2010-04-16 21:01:40 Merritt

me olvidó mencionar que el DIV tengo que mostrar cuando se selecciona la opción 'Otros', tenía que ser ocultado al entrar en la página, por lo que añade el .hide(); propiedad.

También agregué un slideDown ('rápido'); para ayudar con la usabilidad.

Aquí está mi código final gracias a la ayuda de Amit:

$('#specify-source').hide(); 
$('#source').change(function() { 
($(this).val() == "sother") ? 
$('#specify-source').slideDown('fast') : $('#specify-source').hide(); 
});

Fuente

2010-04-19 20:11:49

jQuery: mostrar un elemento del menú desplegable de selección, ocultarlo cuando se seleccionó otra opción

Respuesta

Cuestiones relacionadas