Affichage de div en fonction d'une selectlist

Version imprimable

07/04/2012, 14h40
patxy

Affichage de div en fonction d'une selectlist

Bonjour,

J'aimerais afficher un tableau généré par razor (asp.net). Dans ce tableau, par rang, je veux un selectlist qui afficherait un div différent. Et pour ne pas faire dans la simplicité, le rang 1 peut afficher le div1, alors que le rang 2 affiche un div 2.

J'arrive pas à faire ça correctement.

J'ai mis mes sources dans un jsfiddle (je trouvais ça plus simple).

http://jsfiddle.net/YCPM7/4/

Cette part du code n'est pas celle qui fonctionne le mieux (elle fonctionne absolument pas^^), mais celle qui selon moi montrait le mieux ce que je voulais faire.

Bonjour,

Citation:

Envoyé par extrait de code

Code:

1
2
3
4
5
6
 
<div id="1" class="1">1</div>
<div id="1" class="2">2</div>
<div id="1" class="3">3</div>
<div id="1" class="4">4</div>
<div id="1" class="5">5</div>

une ID DOIT ETRE UNIQUE

Citation:

Envoyé par autre extrait

Code:

1
2
3
4
5
6
7
8
function switchDiv2(value){
    $("#2").$(".1").hide();
    $("#2")$(".2").hide();
    $("#2")$(".3").hide();
    $("#2")$(".4").hide();
    $("#2")$(".5").hide();
    $("#2")$("." + value).toggle();
};

ne manquerait il pas des points ?

07/04/2012, 16h49
patxy

Désolé pour le points, je sais pas comment ils ont disparu :-(

Par contre pour l'ID j'avais oublié.

Mais déjà, la manière dont je m'y attaque, c'est une bonne? J'ai une chance d'arriver à qqch comme cela?

En fait, j'arrivais à bien le faire pour 1 seul selectlist. Mais quand j'en mets 2, y a plein de trucs bizarres qui arrivent :-(
07/04/2012, 19h25
NoSmoking
il est une chose qu'il faut bien comprendre, jQuery ne dispense pas de la bonne compréhension de ce que l'on cherche à faire en javascript.

Dans ton cas il te faut traiter chaque SELECT de la même manière en affectant à leur événement onchange le masquage de toutes les DIVs qui y sont attachées et d'afficher celle concernée.

Ceci implique qu'il te faut pouvoir les repérer, il existe 1001 façons de faire. Je t'en expose une qui consiste à mettre ces DIV dans un conteneur référencé, ayant une ID unique.
exemple:
Code:

1 2 3 4 5 6 7 <div id="div_0"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div>
à partir de là pour récupérer ces DIVs, pour traitement, il suffit de faire un $('#div_0 div').

De la même façon lorsque l'on récupére les SELECTs via un $("select") on utilise la méthode .eq(n), où n est l'index du SELECT à traiter.

Enfin pour traiter les différents SELECT on peut utiliser la méthode .each().

Je pense que tu as suffisamment d'infos pour te remettre à l'ouvrage, commence quand même par la documentation :fleche: http://api.jquery.com/.

Je ne serais pas complet si je ne te parlais pas de la :faq:http://javascript.developpez.com/faq/jquery/, à consommer sans modération.

A j'allais oublier les tutoriels :fleche: http://javascript.developpez.com/cou...meworks#jquery

Voici pour finir la solution que j'ai trouvée :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
 
 
<script type="text/javascript">
    $(document).ready(function () {
        $(".switchTarget").hide();
    });
</script>
 
      <script type="text/javascript">
          function switchDiv(idCont) {
              value = $('#DivSelection' + idCont + ' option:selected').val();  
            alert("contactid = " + idCont + " DivSelected = " + value);
            $("#" + idCont + "1").hide();
            $("#" + idCont + "2").hide();
            $("#" + idCont + "3").hide();
            $("#" + idCont + "4").hide();
            $("#" + idCont + "5").hide();
            $("#" + idCont + "6").hide();
            $("#" + idCont + "7").hide();
            $("#" + idCont + "8").hide();
            $("#" + idCont + "9").hide();
            $("#" + idCont + value).show();
        };
 
    </script> 
 
 
 
                   <form action="">
                                @Code
                                Dim idDiv As String = "DivSelection" + item.idContact.ToString()
                                End Code
                                <select id=@idDiv name="DivSelection">
                                    <option value="1">1</option>
                                    <option value="2">1</option>
                                    <option value="3">1</option>
                                    <option value="4">1</option>
                                    <option value="5">1</option>
                                    <option value="6">1</option>
                                    <option value="7">1</option>
                                    <option value="8">1</option>
                                    <option value="9">1</option>
                                </select>
                                <input id=@item.idContact type="button" value="Envoyer" class="bouton" onclick="switchDiv(@item.idContact)" />
                            </form>
                    </td>
                    <td>
                         @Code
                         Dim id1 As String = item.idContact.ToString() + "1"
                         Dim id2 As String = item.idContact.ToString() + "2"
                         Dim id3 As String = item.idContact.ToString() + "3"
                         Dim id4 As String = item.idContact.ToString() + "4"
                         Dim id5 As String = item.idContact.ToString() + "5"
                         Dim id6 As String = item.idContact.ToString() + "6"
                         Dim id7 As String = item.idContact.ToString() + "7"
                         Dim id8 As String = item.idContact.ToString() + "8"
                         Dim id9 As String = item.idContact.ToString() + "9"
                         End Code
                        <div id=@id1 class="1 switchTarget"> @Html.Raw("1")</div>
                        <div id=@id2 class="2 switchTarget"> @Html.Raw("2")</div>
                        <div id=@id3 class="3 switchTarget"> @Html.Raw("3")</div>
                        <div id=@id4 class="4 switchTarget"> @Html.Raw("4")</div>
                        <div id=@id5 class="5 switchTarget"> @Html.Raw("5")</div>
                        <div id=@id6 class="6 switchTarget"> @Html.Raw("6")</div>
                        <div id=@id7 class="7 switchTarget"> @Html.Raw("7")</div>
                        <div id=@id8 class="8 switchTarget"> @Html.Raw("8")</div>
                        <div id=@id9 class="9 switchTarget"> @Html.Raw("9")</div>