Mostra campi in base al valore selezionato

Question

Ho la seguente sfida.

Ho un modulo di immissione in cui le persone possono aggiungere una nuova voce e una volta approvato possono anche modificarlo. La sfida è nascondere campi specifici in base a una selezione. Quando un utente aggiunge una nuova voce, deve selezionare una categoria specifica. sulla base di ciò, alcuni campi sono nascosti.

Questo è il codice che sto utilizzando finora:

<select name="entry.parent" size="1" style="width: 360px;" id="SPCatChooserSl" class="required"> 
<option value="">Selecteer categorie</option> 
<option selected="selected" value="55">- Option 1</option> 
<option value="59">- Option 2</option> 

</select> 

<div id="option1"> 
<p>Hier comes option 1</p> 
</div> 
<div id="option2"> 
<p>Here comes option 2</p> 
</div> 

<script> 
jQuery(function() { 
jQuery('#option1').hide(); 
jQuery('#option2').hide(); 
}); 

jQuery(function() { 
jQuery("#SPCatChooserSl").change(function() { 
    if (this.value == '55') { 
     jQuery('#option1').show(); 
    } else { 
     jQuery('#option1').hide(); 
    } 
    if (this.value == '59') { 
     jQuery('#option2').show(); 
    } else { 
     jQuery('#option2').hide(); 
    } 
    }); 
    }); 
    </script>  

Questo funziona quando un utente deve ancora scegliere una categoria. Nasconde i campi in base alla selezione.

Tuttavia, quando un utente modifica la voce, la categoria è già selezionata e probabilmente non verrà modificata. Per questo motivo, le opzioni DIVS1 e Opzione2 sono nascoste e poiché l'utente non seleziona una categoria, le div non saranno mai visibili.

Quindi la domanda è: come posso verificare un valore specifico nell'elenco di selezione, mostrare i campi corretti senza un'azione utente.

spero che la mia domanda/sfida è chiara :)

Grazie in anticipo !!!!!!!

Answer 1

È possibile aggiornare le opzioni quando il documento è pronto:

jQuery(function() { 
jQuery('#option1').hide(); 
jQuery('#option2').hide(); 
}); 

function updateOption() { 
    jQuery('#option1').toggle(this.value == '55'); 
    jQuery('#option2').toggle(this.value == '59'); 
} 

jQuery(document).ready(function() { 
    jQuery("#SPCatChooserSl").each(updateOption); 
    jQuery("#SPCatChooserSl").change(updateOption); 
}); 

Fiddle: http://jsfiddle.net/Mwnjk/