Mise à jour avec JQuery

**helios77** · Aujourd'hui, 08h11

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**NoSmoking** · Aujourd'hui, 09h39

Bonjour,

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !!!

**helios77** · Aujourd'hui, 09h48

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**helios77** · Aujourd'hui, 11h59

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

Mise à jour avec JQuery

JavaScript

Vue hybride

Discussions similaires

Partager

Partager