Jquery nascondi mostra oggetto di input

Question

Ho questo codice su jsfiddle. Tutto quello che sto cercando di fare, è nascondere/mostrare un determinato oggetto di input se viene selezionato un valore selezionato.

CODE ON JSFIDDLE

La parte HTML del codice è qui:

<label for="add_fields_placeholder">Placeholder: </label> 
<select name="add_fields_placeholder" id="add_fields_placeholder"> 
    <option value="50">50</option> 
    <option value="100">100</option> 
    <option value="Other">Other</option> 
</select> 
<div id="add_fields_placeholderValue"> 
    Price: 
    <input type="text" name="add_fields_placeholderValue" id="add_fields_placeholderValue"> 
</div>​ 

E la parte jQuery è qui:

$(document).ready(function() 
{ 
    $("#add_fields_placeholder").change(function() { 
     if($(this).val() == "Other") { 
      $("#add_fields_placeholderValue").show(); 
     } 
     else { 
      $("#add_fields_placeholderValue").hide(); 
     } 
    }); 
}); 

Quindi, se l'utente seleziona "Altro", è mostra un altro oggetto di input.

Il problema ora è questo. Per prima cosa, quando apri la pagina, la prima opzione è selezionata per impostazione predefinita e viene mostrato l'oggetto di input opzionale. Si nasconde dopo aver selezionato un'altra opzione.

C'è qualche trucco per farlo nascondere quando si carica anche la pagina? Non solo quando si seleziona un valore manualmente.

Grazie ragazzi.

Answer 1

Basta aggiungere:

$("#add_fields_placeholderValue").hide(); 

Dopo la dichiarazione di evento di modifica al caricamento della pagina.

cioè

$(document).ready(function() 
{ 
$("#add_fields_placeholder").change(function() 
{ 
    if($(this).val() == "Other") 
    { 
    $("#add_fields_placeholderValue").show(); 
    } 
    else 
    { 
    $("#add_fields_placeholderValue").hide(); 
    } 
}); 
$("#add_fields_placeholderValue").hide(); 
}); 

esempio di lavoro: http://jsfiddle.net/bZXYR/

Answer 2

io di solito fattore di fuori della logica nascondi/mostra:

function foobar(){ 
    if($(this).val() == "Other"){ 
     $("#add_fields_placeholderValue").show(); 
    } 
    else{ 
     $("#add_fields_placeholderValue").hide(); 
    } 
} 

e lo chiamano quando la pagina viene caricata.

ma sarei curioso di vedere cosa fanno di solito le altre persone.

Answer 3

È possibile utilizzare i CSS per nascondere inizialmente

#add_fields_placeholderValue{display:none;} 

http://jsfiddle.net/FarVX/20/

Inoltre si dispone di più elementi con lo stesso ID (sottolineato da Brandon), che non è valido

Answer 4

Si potrebbe fallo semplicemente con CSS:

Cambia qui l'ID:

<input type="text" name="add_fields_placeholderValue" id="add_fields_placeholderValue"> 

poiché si utilizza già qui

<div id="add_fields_placeholderValue"> 

e quindi aggiungere questo css:

#add_fields_placeholderValue { 
    display: none;  
}​ 

Answer 5

se si cambia il metodo anonimo in una funzione callable, si dovrebbe essere in grado di chiamare su Pronto()

ad es.

$(document).ready(function() { 
    $("#add_fields_placeholder").change(ShowIfOther); 
    ShowIfOther(); 
}); 

function ShowIfOther() { 
    if ($("#add_fields_placeholder").val() == "Other") { 
     $("#add_fields_placeholderValue").show(); 
    } else { 
     $("#add_fields_placeholderValue").hide(); 
    } 
}​ 

Answer 6

inserire il seguente codice sotto gli elementi segnaposto:

<script>$('#add_fields_placeholderValue').hide();</script> 

Farlo nel gestore pronta può indurre 'lampeggiare' dell'elemento in determinate circostanze:

Twinkling when call hide() on document ready