jQuery: mostra un elemento dal menu a tendina select, lo nascondi quando viene selezionata un'altra opzione

Ho provato a guardarmi intorno e ci sono problemi simili, ma il mio è molto più semplice, ma non riesco a trovare una soluzione all'interno di questi forum.jQuery: mostra un elemento dal menu a tendina select, lo nascondi quando viene selezionata un'altra opzione

Durante l'apprendimento di jQuery, sto provando a visualizzare un DIV quando viene selezionato un elemento/opzione da un menu a discesa di selezione e lo stesso DIV viene nascosto quando viene selezionata qualsiasi altra opzione nel menu a discesa di selezione.

selezionare 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 ho bisogno di mostrare quando 'Altro' è selezionato:

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

Quando è selezionata qualsiasi altra opzione nel menu di selezione, quanto sopra non dovrebbe DIV essere visibile

Ho provato questo jQuery ma ovviamente non funziona correttamente:

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

Qualsiasi aiuto potete darmi, sarei molto grato.

Grazie,

fonte

2010-04-16 Ricardo Zea

vedo quello che stai cercando di fare con la cartina. Semplificare con:

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

fonte

2010-04-16 21:02:32 Amit

Dato che io sono nuovo a stackoverflow.com non posso votare, ma questa risposta ha funzionato subito. Grazie mille Amit, lo apprezzo molto. Grazie alle altre persone per il loro aiuto. –

Finito, sono in grado di votare ora :) –

Heh, grazie per essere tornato. – Amit

Questo è il modo più semplice per nascondere un elemento:

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

Ed ecco un esempio di visualizzare e nascondere 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>

fonte

2010-04-16 20:50:38 regina

più semplice:

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

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

fonte

2010-04-16 21:01:17 Glennular

Ignorare la vista m ap, ecco qui:

$("#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();

Vuoi che includa come con tutto il tuo codice?

Altri metodi postato funziona pure, ma non funzionano con, ma non può gestire una select con @ multipla = "multiple"

fonte

2010-04-16 21:01:40 Merritt

Ho dimenticato di dire che il DIV ho bisogno di visualizzare quando è stata selezionata l'opzione 'Altro', aveva bisogno di essere nascosto entrando nella pagina, così ho aggiunto il .nascosto(); proprietà.

Ho anche aggiunto una slideDown ('veloce'); per aiutare con l'usabilità.

Ecco il mio codice finale grazie all'aiuto di Amit:

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

fonte

2010-04-19 20:11:49

jQuery: mostra un elemento dal menu a tendina select, lo nascondi quando viene selezionata un'altra opzione

risposta

Problemi correlati