Modifier l'attribut selected d'une liste select

**megaloplex** · 06/08/2010, 13h22

Bonjour
j'ai une liste multiple

Code :

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

1
2
3
4
5
 
<select id="rechercheavancee_liste" multiple="multiple" name="rechercheavancee[liste][]" style="width: 100%;" size="4">
<option>option 1</option>
<option>option 2</option>
</select>

et j'ai crée une fonction qui me selectionne l'ensemble des options de la liste

Code :

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

1
2
3
$('#rechercheavancee_liste option').each(function ()
{ $(this).selected;}
);

la fonction est bien appelé mais elle ne procede pas la selection de tous les elements de la liste
Merci de votre aide

**SpaceFrog** · 06/08/2010, 13h37

Code :

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

1
2
3
$('#rechercheavancee_liste option').each(function ()
{ $(this).selected="selected";}
);

**Bovino** · 06/08/2010, 14h18

Contrairement à l'attribut selected de la balise HTML option, la valeur de la propriété de l'objet JavaScript correspondant est un booléen, il serait préférable selon moi de faire plutôt

Code :

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

$(this).selected=true;

**danielhagnoul** · 06/08/2010, 21h03

Bonsoir

Il faut modifier l'attribut selected, exemple (voir les commentaires dans le code) :

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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		/* BASE */
		body {
			background-color:#dcdcdc;
			color:#000000;
			font-family:sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
 
		/* dvjh */
		h1 {
			text-align:center;
			font-style:italic;
			text-shadow: 4px 4px 4px #bbbbbb;
		}
		h2 {
			text-align:center;
		}
		div#conteneur {
			width:95%;
			height:auto;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
		}
		/*
		div#affiche {
			clear:both;
			margin:12px;
			padding:6px;
			border:1px solid #999999;
			background-color:#FFFFFF;
			color:#000000;
		}
		*/
 
		/* TEST */
	</style>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-1.4.2.min.js"></script>
 	<script>
		$(function(){
 
			/*
			 * Pour parcourir tous les éléments sélectionnés de la liste
			 */
			var selectedOption = function(){
				$('#rechercheavancee_liste option:selected').each(function(i, item){
					console.log($(item).val(), $(item).text());
				});
			};
 
			selectedOption();
 
			console.log("------------------");
 
			/*
			 * Pour parcourir tous les éléments de la liste
			 */
			$('#rechercheavancee_liste option').each(function(i, item){
				$(item).text("Option n° " + (i + 1));
 
				switch(i){
					case 1:
						$(item).attr("selected",""); // désélectionné
						break;
					case 3:
						$(item).attr("selected","selected"); // sélectionné
						break;
					default:
						break; // on ne fait rien
				}
			});
 
			selectedOption();
 
			/*
			 * ATTENTION
			 *
			 * Si on examine le code HTML dans Firebug ou dans Chrome
			 * on ne voit aucun changement. Mais l'affichage du select et
			 * les résultats affichés dans la console témoignent du changement.
			*/
		});
	</script>
</head>
<body>
	<h1>Forum jQuery</h1>
	<div id="conteneur">
 
		<select id="rechercheavancee_liste" multiple="multiple" size="4" style="width:200px;">
			<option value="opt 1">option 1</option>
			<option value="opt 2" selected="selected">option 2</option>
			<option value="opt 3">option 3</option>
			<option value="opt 4">option 4</option>
			<option value="opt 5" selected="selected">option 5</option>
			<option value="opt 6">option 6</option>
		</select>
 
	</div>
</body>
</html>

**megaloplex** · 13/08/2010, 12h46

Merci a vous tous pour votre help

**Garra** · 06/12/2010, 13h05

Salut à tous

moi ça marche seulement lorsque je fais :

Code :

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

$(item).attr("selected",true);

pourquoi vous faites tous différemment?

merci

**danielhagnoul** · 07/12/2010, 22h38

Bonsoir

Code :

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

1
2
$(item).attr("selected",""); // désélectionné
$(item).attr("selected","selected"); // sélectionné

C'est normalement la bonne solution, c'est du CSS.

Code :

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

1
2
3
<select>
	<option selected="selected" value="10">dix</option>
</select>

Modifier l'attribut selected d'une liste select

jQuery

Discussions similaires

Partager

Partager