menus deroulants et jquery
bonjour
j'ai deux menus deroulant que je voudrai faire interagir avec jquery
je voudrai selon le choix que je fait dans mes menus deroulant recuperer deux valeurs qui vont conditionner un traitement sous jquery (remplissage de liste deroulante)
le problemee est que je n'arrive qu'a recuperer une seule des deux valeurs
la procedure est la suivante
si je clique sur le lien dynamique ceramique j'envoie l'url qui active un module de calcul et renvoie dans le fichier html la valeur d'une variable
Code:
<LI ><A href="{% url graph2001 %} ">ceramique</A></LI>
active la fonction
def graphe2001(request):
Code:
1
2
3
4
5
| indic=1
print "indic",indic
return render_to_response('material/critere200.html',
{'indic':indic},
context_instance=RequestContext(request)) |
et renvoie la valeur 1 dans
Code:
<p class= "rep1" width="100" style= "display:none;">{{ indic }}</p> {# menu 1 #}
et je recupere sous jquery une ref2
Code:
var uneref2= $('p.rep1').text(); // famille de materiaux menu1
mais si je clique sur une option du deuxieme menu, je recupere la deuxieme variable uneref3 mais j'efface la precedente
comment faire pour recuperer les deux ??
le code est le suivant :
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
| <script type="text/javascript">
$(document).ready(function() {
var uneref2= $('p.rep1').text(); // famille de materiaux menu1
var uneref3= $('p.rep2').text(); // famille de materiaux menu2
if(uneref2==1) {
...
if(uneref3==1) {
....
et pour le code html
<body>
<p class= "rep1" width="100" style= "display:none;">{{ indic }}</p> {# menu 1 #}
<p class= "rep2" width="100" style= "display:none;">{{ indic1 }}</p> {# menu 2 #}
<DIV id=monmenu>
<UL class=niveau1>
<LI>Menu1
<UL class=niveau2 style="LEFT: 0px; TOP: 2px">
<LI ><A href="{% url graph2001 %} ">ceramique</A></LI> |
......
Code:
1
2
3
4
5
6
7
8
| <DIV id=monmenu2>
<UL class=niveau1>
<LI>Menu2
<UL class=niveau2 style="LEFT: 0px; TOP: 2px">
<LI ><A href="{% url graph20000 %} ">ceramique</A></LI> |
......
menus dereoulants et jquery
bonjour
j' explique,
j'ai un formulaire qui contient deux menus deroulants et deux listes deroulantes
selon les choix que je fait pour chaque menu,
si je clique par exemple sur le choix ceramique, je vais remplir la liste deroulante avec les materiaux de type ceramique
meme chose pour le remplisssage de la liste 2
j'ai essaye le click mais ca marche pas
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| $(".dropdown1 ul li a").click(function() {
var text1 = $(this).html();
if(text1=="ceramique") {
....
<body>
<div class="dropdown1">
<ul >
<li value="1"><a href="">ceramique</a></li> |
si il y a qcq chose de plus moderne, je suis preneur....
menus deroulants et jquery
j'ai une balise <a car il faut bien que ce soit un lien dynamique pour cliquer ??
voila le code simplifié
lorsque je soumet le formulaire, les deux listes deroulantes sont remplies et un element est selectionné dans chaque liste
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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
| !DOCTYPE html>
<html lang<="en">
<head>
<style>
</style>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script>
$(document).ready(function() {
$(".dropdown1 ul li a").click(function() {
var text1 = $(this).html();
if(text1=="ceramique") {
$.getJSON("{% url search_mat %}", {'reference': text1 }, function(data) {
family = data['val_mat'];
$.each(family, function(ind, item) {
$('.target').append('<option value="'+ ind +'">'+ item +'</option>');
val = $('option:selected',this).text();
$(this).next().text(val);
}); // each
});
}
});
$(".dropdown2 ul li a").click(function() {
var text2 = $(this).html();
if(text2=='ceramique') {
$.getJSON("{% url search_mat %}", {'reference': text2 }, function(data) { // appel fonction de filtrage
family = data['val_mat'];
$.each(family, function(ind, item) {
$('.target2').append('<option value="'+ ind +'">'+ item +'</option>');
val = $('option:selected',this).text();
$(this).next().text(val);
}); // each
});
});
});
</script>
</head>
<body>
<form id="form" name="form" method="post" action="index.html">
<label >materiau1
</label>
<select class="target" id="mat" title="Select one" style="background-color:#F0F8FF;" >
<option value="" selected="selected" >..........................................</option>
</select>
<label >materiau 2
</label>
<select class="target2" id="mat2" style="background-color:#F0F8FF;">
<option value="" selected="selected">..........................................</option>
</select>
<div class="dropdown1">
<ul >
<li value="1"><a href="">ceramique</a></li>
<li value="2"><a href="">alliages</a></li>
<li value="3"><a href="">autres</a></li>
</ul>
</div>
<div class="dropdown2">
<ul >
<li value="1"><a href="">mica</a></li>
<li value="2"><a href="">plexi</a></li>
<li value="3"><a href="">autres</a></li>
</ul>
</div>
<button type="submit">Envoi</button>
</form>
</body>
</html> |
menus deroulants et jquery
bonjour
oui ca marche
c'etait bien le problème !
merci beaucoup
;)
