menus deroulants et jquery

**pat100** · 28/12/2012, 11h00

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 :

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

<LI ><A  href="{% url graph2001 %} ">ceramique</A></LI>

active la fonction

def graphe2001(request):

Code :

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

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 :

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

 <p class= "rep1" width="100" style= "display:none;">{{ indic }}</p>     {#  menu 1 #}

et je recupere sous jquery une ref2

Code :

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

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 :

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

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

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>

......

**SpaceFrog** · 29/12/2012, 19h44

oh du code de 1912 !!!

Code :

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

1
2
3
 
 <LI>Menu2
  <UL class=niveau2 style="LEFT: 0px; TOP: 2px">

Code :

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

1
2
3
=>
 <li>Menu2
  <ul class="niveau2" style="left: 0px;top: 2px">

A part ça je n'ai rien compris ...
tu nous montres trop peu de html ???

**pat100** · 30/12/2012, 08h20

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 :

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

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

**SpaceFrog** · 30/12/2012, 08h49

pourquoi une balise a ?
si tu utilises une balise a il faut inhiber le href avec preventDefault

**pat100** · 30/12/2012, 09h13

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 :

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

**John Blobsmith** · 30/12/2012, 14h33

Comme ça a été dis, tu dois utiliser preventDefault()

Code :

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

1
2
3
 
$(".dropdown1 ul li a").click(function(e) {
                    e.preventDefault();

menus deroulants et jquery

jQuery

Vue hybride

Discussions similaires

Partager

Partager