Liste déroulante optgroup

1 pièce(s) jointe(s)

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

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

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

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

Bonsoir, merci beaucoup :)

1 pièce(s) jointe(s)

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