Je développe un panneau d'options de thème WP mais ce n'est pas spécifique à WP.

J'ai deux options liées:

Option 1 = Colonnes Option 2 = Disposition

La sélection effectuée dans l'option un dicte ce qui est affiché dans l'option deux:

<!-- this controls the selection of columns -->
<select name="column_select" id="column_select">
    <option value="col1">1 column</option>
    <option value="col2">2 column</option>
    <option value="col3">3 column</option>
</select>


<!-- this controls the selection of columns -->

<!-- if '1 column' is selected this div is shown -->
<div id="layout_select1">
    You only have one column!
</div>

<!-- if '2 column' is selected this div is shown -->
<div id="layout_select2">
    <input type="radio" id="'.$option[0].'" name="'.$option[0].'" size="25" value="lay1" '.$layout1.' />col1
    <input type="radio" id="'.$option[0].'" name="'.$option[0].'" size="25" value="lay2" '.$layout2.' />col2
</div>

<!-- if '3 column' is selected this div is shown -->
<div id="layout_select3">
    <input type="radio" id="'.$option[0].'" name="'.$option[0].'" size="25" value="lay3" '.$layout3.' />col1
    <input type="radio" id="'.$option[0].'" name="'.$option[0].'" size="25" value="lay4" '.$layout4.' />col2
    <input type="radio" id="'.$option[0].'" name="'.$option[0].'" size="25" value="lay5" '.$layout5.' />col2
</div>

J'ai un morceau de travail de jQuery qui accomplit la plupart de ce dont j'ai besoin:

<script>
    $("#column_select").change(function() {
        ($(this).val() == "col1") ? $("#layout_select1").show() : $("#layout_select1").hide();
        ($(this).val() == "col2") ? $("#layout_select2").show() : $("#layout_select2").hide();
        ($(this).val() == "col3") ? $("#layout_select3").show() : $("#layout_select3").hide();
    });
</script>

Le problème auquel je suis confronté en ce moment est que lors du chargement de la page, toutes les divs sont affichées. Ils ne sont masqués que lorsque l'utilisateur bascule l'option de menu de sélection.

Comment masquer les divs corrects lors de la charge?

MISE À JOUR: J'ai eu quelques réponses mais je ne l'ai probablement pas expliqué correctement. Je ne veux pas que toutes les divs soient cachées lors du chargement de la page. Je veux juste que les divs corrects soient cachés lors du chargement. Ainsi, par exemple, si l'utilisateur sélectionne «2 colonnes», il voit le deuxième div. S'il revient au panneau d'options demain ou le mois prochain lors du chargement, il devrait toujours voir le deuxième div affiché. Le jQuery doit détecter l'option actuellement sélectionnée lors du chargement et afficher la div appropriée.

Vous pouvez voir ce que je veux dire ici: http://jsfiddle.net/NickBe/RGXa7/3/

Je suis très nouveau sur javascript et jQuery, donc toute aide serait grandement appréciée. Merci les gars!

2
Nick 11 oct. 2011 à 11:14

7 réponses

Meilleure réponse

Déclenchez la fonction de changement de sélection sur document.ready()

$(document).ready(function(){
   $("#column_select").trigger('change');
});

Cela affichera / masquera la div appropriée

1
anu 11 oct. 2011 à 07:24

Je serais d'accord avec Stanley pour attribuer la classe css aux divs comme options de colonnes et utiliser comme -

$("#column_select").change(function() {         
    $('div[id^=layout_select]').hide();
    $('.'+this.value).show();  
});

Vous pouvez définir l'affichage: aucune option par défaut.

Démo - http://jsfiddle.net/RGXa7/10/

0
Jayendra 11 oct. 2011 à 07:29

Vous pouvez créer une classe CSS et l'attacher à toutes les divs. Vous pouvez utiliser la propriété visibilité: cachée de CSS si vous voulez que les divs soient invisibles tout en occupant l'espace nécessaire à l'écran, ou afficher: aucune si vous voulez qu'elles soient complètement invisibles.

Je crois que votre code existant devrait toujours fonctionner si vous utilisez display: none. Les DIV sont masqués, mais votre jquery les affichera une fois que l'option sera sélectionnée.

0
Stanley Stuart 11 oct. 2011 à 07:19

Vous devez vous cacher ensuite une fois le DOM chargé.

<script>
    $(function(){
        // This code block is called once the document has loaded in the browser.
        $('#layout_select2, #layout_select3').hide();
    });

    $("#column_select").change(function() {
        ($(this).val() == "col1") ? $("#layout_select1").show() : $("#layout_select1").hide();
        ($(this).val() == "col2") ? $("#layout_select2").show() : $("#layout_select2").hide();
        ($(this).val() == "col3") ? $("#layout_select3").show() : $("#layout_select3").hide();
    });

</script>
2
Damon Skelhorn 11 oct. 2011 à 07:18
<script>
    $(function(){
        // This code block is called once the document has loaded in the browser.
        $( "#column_select" ).val( 'col1' ).trigger( 'change' ); // reset the value for Browsers caching Form Element States
        $( '#layout_select2, #layout_select3').hide();
    });

    $("#column_select").change(function() {
        $( '#layout_select1, #layout_select2, #layout_select3' ).hide();
        $( '#layout_select' + $( this ).val().charAt(3) ).show();
    }); 

</script>
1
campino2k 11 oct. 2011 à 07:27

Réglez l'affichage sur "aucun" pour les divs que vous souhaitez masquer

<div id="layout_select2" style="display:none">    
0
Sivakumar 11 oct. 2011 à 07:21
<script>
    //you can initially hide your divs
    $("#layout_select1").hide();
    $("#layout_select2").hide();
    $("#layout_select3").hide();

    $("#column_select").change(function() {
        ($(this).val() == "col1") ? $("#layout_select1").show() : $("#layout_select1").hide();
        ($(this).val() == "col2") ? $("#layout_select2").show() : $("#layout_select2").hide();
        ($(this).val() == "col3") ? $("#layout_select3").show() : $("#layout_select3").hide();
    });
</script>
1
Sedat Başar 11 oct. 2011 à 07:20