Jquery Afficher les champs en fonction de la valeur Sélectionnez Menu, mais à la page charge

Question

Cette question fait référence à la question Show/hide fields depending on select value

<select id="viewSelector"> 
    <option value="0">-- Select a View --</option>  
    <option value="view1">view1</option> 
    <option value="view2">view2</option> 
    <option value="view3">view3</option> 
</select> 

<div id="view1"> 
    <!-- content --> 
</div> 
<div id="view2a"> 
    <!-- content --> 
</div> 
<div id="view2b"> 
    <!-- content --> 
</div> 
<div id="view3"> 
    <!-- content --> 
</div> 



$(document).ready(function() { 
    $.viewMap = { 
    '0' : $([]), 
    'view1' : $('#view1'), 
    'view2' : $('#view2a, #view2b'), 
    'view3' : $('#view3') 
    }; 

    $('#viewSelector').change(function() { 
    // hide all 
    $.each($.viewMap, function() { this.hide(); }); 
    // show current 
    $.viewMap[$(this).val()].show(); 
    }); 
}); 

Lorsque je sélectionne le 2ème élément dans le menu il montre le champ correspondant. L'exception à ceci est lorsque le chargement de page sur le menu de sélection a déjà le 2ème élément de menu sélectionné, le champ ne s'affiche pas.

Comme vous pourriez être en mesure de dire, je suis nouveau jquery et pourrait definetly utiliser un peu d'aide à régler ce code afin que le champ de l'élément sélectionné est affiché sur la page de chargement.

Merci,

Tim

Answer 1

La chose la plus facile à faire dans ce cas est juste t gréeur le gestionnaire comme ce change vous avez déjà/besoin:

$('#viewSelector').change(function() { 
    $.each($.viewMap, function() { this.hide(); }); 
    $.viewMap[$(this).val()].show(); 
}).change(); //only change to your code! 

Cela déclenche juste l'événement change sur le même sélecteur juste après avoir lié, donc il se produit sur document.ready (où vous liant) ainsi comme quand ça change. .change() sans argument est équivalent à .trigger('change').

Answer 2

Déplacez le code dans une fonction et appeler onload ainsi - si vous avez stocké

$(document).ready(function() { 

    function toggleDivs(val) { 
     $.each($.viewMap, function() { this.hide(); }); 
     $.viewMap[val].show(); 
    } 

    toggleDivs($('#viewSelector').val()); 

    $.viewMap = { 
     '0' : $([]), 
    'view1' : $('#view1'), 
    'view2' : $('#view2a, #view2b'), 
    'view3' : $('#view3') 
    }; 

    $('#viewSelector').change(function() { 
    toggleDivs($(this).val()); 
    }); 
}); 

Bien sûr, vous auriez probablement pas besoin $.viewMap la données de sélection dans le code HTML du <option> .. data-selectors="#view2a, #view2b"