Contrôle du choix des listes déroulantes

**edemtakouni** · 21/04/2012, 17h19

Bonjour,
Je souhaite avoir 2 listes de sélection contenant les même item (éléments) avec la spécificité que lorsque un élément de la liste 1 a été choisi qu'elle ne puisse plus être choisi dans la liste 2 en affichant une alerte à l'utilisateur de ne plus faire ce choix.
J'ai besoin d'aide car je n'ai que quelques bribes de connaissances en javascript/jquery pour le
faire.
Un lien, un script je suis preneur.
Merci

**oceane751** · 25/04/2012, 02h37

et si tu faisais une première liste déroulante avec des eléments, la deuxième va afficher les éléments en rapport avec la première etc

avec onchange() et tu peux le faire en AJAX
comme ça tu récupères les éléments avec une requete sql

**andry.aime** · 25/04/2012, 06h36

une option disabled ne te convient 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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<html>
	<head>
		<script type="text/javascript">
			function disableOption(index){
				var opt = document.getElementById("liste2").options;
				for(i=0; i<opt.length; i++){
					opt[i].disabled=false;
				}
				opt[index].disabled=true;
			}
		</script>
	</head>
	<body>
		<select onchange="disableOption(this.selectedIndex);">
			<option></option>
			<option label="test" value="1">Afrique</option>
			<option label="test" value="2">Amérique</option>
			<option label="test" value="3">Asie</option>
			<option label="test" value="4">Australie</option>
			<option label="test" value="5">Europe</option>
		</select>
		<br/>
		<select id="liste2">
			<option></option>
			<option label="test" value="1">Afrique</option>
			<option label="test" value="2">Amérique</option>
			<option label="test" value="3">Asie</option>
			<option label="test" value="4">Australie</option>
			<option label="test" value="5">Europe</option>
		</select>
	</body>
</html>

A+.

Invité · 25/04/2012, 09h09

Bonjour,
et vice-versa :

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
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript">
                        function disableOption(index,idlist){
                                var opt = document.getElementById(idlist).options;
                                for(i=0; i<opt.length; i++){
                                        opt[i].disabled=false;
                                }
                                opt[index].disabled=true;
                        }
                </script>
	</head>
	<body>
		<select id="liste1" onchange="disableOption(this.selectedIndex,'liste2');">
			<option></option>
			<option label="test" value="1">Afrique</option>
			<option label="test" value="2">Amérique</option>
			<option label="test" value="3">Asie</option>
			<option label="test" value="4">Australie</option>
			<option label="test" value="5">Europe</option>
		</select>
		&nbsp;
		<select id="liste2" onchange="disableOption(this.selectedIndex,'liste1');">
			<option></option>
			<option label="test" value="1">Afrique</option>
			<option label="test" value="2">Amérique</option>
			<option label="test" value="3">Asie</option>
			<option label="test" value="4">Australie</option>
			<option label="test" value="5">Europe</option>
		</select>
	</body>
</html>

Contrôle du choix des listes déroulantes

JavaScript

Vue hybride

Discussions similaires

Partager

Partager