Liste déroulante optgroup

**aminamahh** · 14/05/2015, 01h13

Bonsoir , j'ai une liste déroulante optgroup :

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
<select id="filtre" name="filtre" multiple="multiple" size="5" >
    <optgroup label="couleur">
        <option value="rr">Beige</option>
        <option value="bb">blanc</option>
        <option value="bb">Blue</option>
                    ......
    </optgroup>
    <optgroup label="pointure">
        <option value="31">31</option>
        <option value="32">32</option>
        <option value="33">33</option>
        <option value="36">36</option
 </optgroup>
    </select>

je voudrais récuperer les options sélectionnés avec ses labels "optgoup" parexmple si je selectionne Blue, Blanc et je clique sur ajouter il m'affiche dans une colonne de tableau couleur et au dessous blanc et bleu exactement comme la piéce jointe , mais malheureusement je sais pas comment faire cette fonction js que récupere les selection et les affiche à un tableau , qq1 peut m'aider et merci

**javatwister** · 14/05/2015, 17h54

Un petit exemple; en cliquant sur les valeurs entrées, tu peux même les supprimer;

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>...</title>
 
<style type="text/css">
 
#cadre{
	margin:50px;
	padding:0px;
	float:left;
	width:230px;
}
 
 
#cadre ul{
	text-align:center;
	list-style-type:none;
	padding:0px;
	margin:0px;
	width:200px;
}
 
#cadre li{
	margin:0px;
	background-color:red;
	border: solid 1px black;
}
 
</style>
 
</head>
<body>
 
<div  id="cadre">
<ul id="couleur">
<li>couleur</li>
</ul>
<ul id="pointure">
<li>pointure</li>
</ul>
<ul id="taille">
<li>taille</li>
</ul>
<ul id="transpiration">
<li>transpiration</li>
</ul>
</div>
 
<div  style="margin:50px;float:left;width:200px" >
 
<select id="filtre" name="filtre" multiple="multiple" size="10" style="width:160px">
    <optgroup label="couleur">
        <option value="rr">Beige</option>
        <option value="bb">blanc</option>
        <option value="cc">Blue</option>
    </optgroup>
    <optgroup label="pointure">
        <option value="31">31</option>
        <option value="32">32</option>
        <option value="33">33</option>
        <option value="36">36</option
 </optgroup>
 <optgroup label="transpiration">
        <option value="sup">superficielle</option>
        <option value="int">intérieure</option>
        <option value="post">postérieure</option>
        <option value="sub">subtile</option
 </optgroup>
    </select>
<button onclick="choix()">choix</button>
</div>
 
<script type="text/javascript">
 
var b=function(q){return document.getElementById(q)}
var liste, li, pos;
function choix(){
	 liste=b("filtre").options;
	for(i=0;i<liste.length;i++){
		if(liste[i].selected==true){
			go(i)
		}
	}
}
 
function go(ind){
	pos=liste[ind].parentNode.label;
	li=document.createElement("li");
	li.id=pos+ind;
	li.style.backgroundColor="white";
	li.style.cursor="pointer";
	li.title="supprimer";
	li.onclick=function(){this.parentNode.removeChild(this)}
	li.appendChild(document.createTextNode(liste[ind].text));
	b(pos).appendChild(li);
}
 
</script>
 
</body>
</html>

**aminamahh** · 15/05/2015, 01h04

Bonsoir, merci beaucoup

**aminamahh** · 16/05/2015, 20h49

Bonsoir , svp j'ai un autre question si je veux récuperer les élements sélectionnés dans un tableau et non pas dans une liste ul li par exemple j'ai ce tableau comme dans la piéce jointe et je veux récuperer mes élement dans la premiére colonne.merci

Liste déroulante optgroup

JavaScript

Discussions similaires

Partager

Partager