jQuery - show/hide com combobox e div dinamico

Show/hide dinamico ao selecionar um ítem do combobox.

by Francis Rodrigues

HTML

<div id="SiteHydroDiv">
    
    <div class="group">
        <div class="header">Estação 1</div>
    
        <div class="fields">
        
            <div class="required">
                <label for="estacao-0">Nome da Estação:</label>
                <input type="input" id="estacao-0" />
            </div>
        
            <div class="required">
                <label for="SiteHydro0HydroTypeName">Tipo de estação</label>
                <select name="tipo-estacao-0" id="tipo-estacao-0">
                    <option value="0">Selecione...</option>
                    <option value="um">um</option>
                    <option value="dois">dois</option>
                </select>
            </div>
        
        </div><!--// fields -->
    
        <div id="hydro_type_seiom" class="seiom_class_um">
            <div class="fields">
                <div class="required">Seiom Informática 1</div>
                <label for="email-0" class="email-0">E-mail:</label>
                <input type="input" id="email-0" class="email-0" />
            </div>
        </div>
        
        <div id="hydro_type_seiom" class="seiom_class_dois">
            <div class="fields">
                <div class="required">Seiom Informática 2</div>
                <label for="email-1" class="email-1">E-mail:</label>
                <input type="input" id="email-1" class="email-1" />
            </div>
        </div>
    
    </div><!--// group 0 -->

    <!-- group 1 -->
    <div class="group">
        <div class="header">Estação 2</div>
    
        <div class="fields">
        
            <div class="required">
                <label for="estacao-1">Nome da Estação:</label>
                <input type="input" id="estacao-1" />
            </div>
        
            <div class="required">
                <label for="SiteHydro1HydroTypeName">Tipo de estação</label>
                <select name="tipo-estacao-1" id="tipo-estacao-1">
                    <option...

CSS

.header {
    font-weight:bold; font-family:verdana; font-size:14px;
}
.fields {
    font-weight:normal; font-family:arial; font-size:12px;
}
li span {
    cursor:pointer;
    font-weight:normal; font-family:arial; font-size:12px;
}
.group { margin:10px 2px; }
.required { margin:10px 0px; }

JavaScript

$(function() {
    
    $("select[id^=\'tipo-estacao-\']").each(function(){
        
        if ( $(this).val() == 0 ) {
            $( ".seiom_class_" + $(this).val() ).hide();
        }
        
        $("#SiteHydroDiv #" + this.id).live('change',function(){
            alert( $(this).val() );
            $( ".seiom_class_" + $(this).val() ).show();
        });
        
    });

});