Mise à jour avec JQuery

Version imprimable

Bonjour,
Je suis complètement novice avec Jquery, c'est un langage que je n'arrive pas à appréhender, j'ai besoin d'un coup de pouce
Je suis dans une impasse dans mon code asp.net et je pense que le jQuery va pouvoir me sortir de là.

J'ai tout un tas de lise déroulante dans ma page sur lesquelles j'ai rajouté un argument "data-duree-reel"
Je voudrais qu'une fois que ma page chargée, l'option de la liste déroulante en question soit positionnée en selected si sa value = la valeur de l'argument

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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<select id="selectDuree_638926272000000000$1$1OART" name="Duree_Reel_638926272000000000$1$1OART" data-duree-reel="3">                            
                                    <option value="0">0h00</option>                            
                                    <option value="0,25">0h15</option>                            
                                    <option value="0,5">0h30</option>                            
                                    <option value="0,75">0h45</option>                            
                                    <option value="1">1h00</option>                            
                                    <option value="1,25">1h15</option>                            
                                    <option value="1,5">1h30</option>                            
                                    <option value="1,75">1h45</option>                            
                                    <option value="2">2h00</option>                            
                                    <option value="2,25">2h15</option>                            
                                    <option value="2,5">2h30</option>                            
                                    <option value="2,75">2h45</option>                            
                                    <option value="3">3h00</option>                            
                                    <option value="3,25">3h15</option>                            
                                    <option value="3,5">3h30</option>                            
                                    <option value="3,75">3h45</option>                            
                                    <option value="4">4h00</option>                            
                                    <option value="4,25">4h15</option>                            
                                    <option value="4,5">4h30</option>                            
                                    <option value="4,75">4h45</option>                            
                                    <option value="5">5h00</option>                            
                                    <option value="5,25">5h15</option>                            
                                    <option value="5,5">5h30</option>                            
                                    <option value="5,75">5h45</option>                            
                                    <option value="6">6h00</option>                            
                                    <option value="6,25">6h15</option>                            
                                    <option value="6,5">6h30</option>                            
                                    <option value="6,75">6h45</option>                            
                                    <option value="7">7h00</option>                            
                                    <option value="7,25">7h15</option>                            
                                    <option value="7,5">7h30</option>                            
                                    <option value="7,75">7h45</option>                            
                                    <option value="8">8h00</option>                            
                                    <option value="8,25">8h15</option>                            
                                    <option value="8,5">8h30</option>                            
                                    <option value="8,75">8h45</option>                            
                                    <option value="9">9h00</option>                           
                                    <option value="9,25">9h15</option>                            
                                    <option value="9,5">9h30</option>                            
                                    <option value="9,75">9h45</option>                            
                                    <option value="10">10h00</option>                            
                                    <option value="10,25">10h15</option>                            
                                    <option value="10,5">10h30</option>                            
                                    <option value="10,75">10h45</option>                            
                                    <option value="11">11h00</option>                            
                                    <option value="11,25">11h15</option>                            
                                    <option value="11,5">11h30</option>                            
                                    <option value="11,75">11h45</option>                            
                                    <option value="12">12h00</option>                            
                        </select>
<select id="selectDuree_638926272000000000$1$1OFJUR" name="Duree_Reel_638926272000000000$1$1OART" data-duree-reel="4,25">                            
                                    <option value="0">0h00</option>                            
                                    <option value="0,25">0h15</option>                            
                                    <option value="0,5">0h30</option>                            
                                    <option value="0,75">0h45</option>                            
                                    <option value="1">1h00</option>                            
                                    <option value="1,25">1h15</option>                            
                                    <option value="1,5">1h30</option>                            
                                    <option value="1,75">1h45</option>                            
                                    <option value="2">2h00</option>                            
                                    <option value="2,25">2h15</option>                            
                                    <option value="2,5">2h30</option>                            
                                    <option value="2,75">2h45</option>                            
                                    <option value="3">3h00</option>                            
                                    <option value="3,25">3h15</option>                            
                                    <option value="3,5">3h30</option>                            
                                    <option value="3,75">3h45</option>                            
                                    <option value="4">4h00</option>                            
                                    <option value="4,25">4h15</option>                            
                                    <option value="4,5">4h30</option>                            
                                    <option value="4,75">4h45</option>                            
                                    <option value="5">5h00</option>                            
                                    <option value="5,25">5h15</option>                            
                                    <option value="5,5">5h30</option>                            
                                    <option value="5,75">5h45</option>                            
                                    <option value="6">6h00</option>                            
                                    <option value="6,25">6h15</option>                            
                                    <option value="6,5">6h30</option>                            
                                    <option value="6,75">6h45</option>                            
                                    <option value="7">7h00</option>                            
                                    <option value="7,25">7h15</option>                            
                                    <option value="7,5">7h30</option>                            
                                    <option value="7,75">7h45</option>                            
                                    <option value="8">8h00</option>                            
                                    <option value="8,25">8h15</option>                            
                                    <option value="8,5">8h30</option>                            
                                    <option value="8,75">8h45</option>                            
                                    <option value="9">9h00</option>                           
                                    <option value="9,25">9h15</option>                            
                                    <option value="9,5">9h30</option>                            
                                    <option value="9,75">9h45</option>                            
                                    <option value="10">10h00</option>                            
                                    <option value="10,25">10h15</option>                            
                                    <option value="10,5">10h30</option>                            
                                    <option value="10,75">10h45</option>                            
                                    <option value="11">11h00</option>                            
                                    <option value="11,25">11h15</option>                            
                                    <option value="11,5">11h30</option>                            
                                    <option value="11,75">11h45</option>                            
                                    <option value="12">12h00</option>                            
                        </select>

J'ai préparé en début de page ceci mais je ne dais pas quoi y mettre après plusieurs essais de quelques heures
Je suis peruadé que çà va être tout bête

Code:

1
2
3
4
5
6
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script>
        $(document).ready(function () {            
            /*QUoi mettre ?*/                      
    });
    </script>

Merci pour votre aide

Bonjour,

Citation:

je pense que le jQuery va pouvoir me sortir de là.

pourquoi jQuery et non pas JavaScript tout simplement ?

Cela pourrait être quelque chose comme :
Code:

1 2 3 4 5 6 7 8 9 10 // DOM construit document.addEventListener("DOMContentLoaded", () => { // liste des éléments à traiter const elements = document.querySelectorAll("[data-duree-reel]"); // pour tous ces éléments elements.forEach((element) => { // affectation directe element.value = element.dataset.dureeReel; }); });
Ceci étant je ne comprend pas pourquoi, comme tu construis ta liste côté serveur, tu n'affectes pas l'attribut selected à l'<option> dont la value correspond à ta data-duree-reel !!!

Merci pour le rtour

Je comprends ta question mais je ne suis pas sur du pur serveur pour la génération justement, je suis dans un Repeater

Voici le bout de code situ as une idée pour me dépatouiller

Si trouves l'astuce pour combiner les balises d'intégration <%# et <%, je suis preneur

Code:

1
2
3
4
5
6
7
 
<select id="selectDuree_<%#((Matik.Model.Saisie)(Container.DataItem)).Id %>" name="<%# "Duree_Reel_" + ((Matik.Model.Saisie)(Container.DataItem)).Id %>" data-Duree-Reel="<%# ((Matik.Model.Saisie)(Container.DataItem)).DureeReel %>">
                            <%for (double i = 0; i <= 12; i += 0.25)
                                { %>
                                    <option value='<%= i %>'><%= Matik.Helper.Tools.DureeToString(i) %></option>
                            <%}%>
                        </select>

25/09/2025, 11h59
helios77

Ton petit bout de code fonctionne très bien, merci

Autre petite question.
Pour mes liste qui sont sur la valeur 0 car la sélection n'a pas encore été enregistré, j'aimerais que lorsque l'on clique sur la liste déroulante, la valeur se positionne sur cette valeur data_duree_reel

UN peu la même mécanique maix je veux le provoquer sur le click de la liste en question

Bonjour,

Si vous voulez intégrer la condition directement dans le code HTML lors de la génération voici comment l'écrire :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<% // 1. Récupérer la valeur de la durée réelle 
 double dureeReelle = ((Matik.Model.Saisie)Container.DataItem).DureeReel; %>
 
<select id="selectDuree_<%#((Matik.Model.Saisie)(Container.DataItem)).Id %>"
        name="<%# "Duree_Reel_" + ((Matik.Model.Saisie)(Container.DataItem)).Id %>"
        data-Duree-Reel="<%# dureeReelle %>">
 
    <%for (double i = 0; i <= 12; i += 0.25)
    { 
        // 2. Définir la chaîne 'selected' si la condition est remplie
        string selectedAttr = (i == dureeReelle) ? " selected" : ""; 
    %>
        <option value='<%= i %>'<%= selectedAttr %>><%= Matik.Helper.Tools.DureeToString(i) %></option>
    <%}%>
</select>