Forum Clubic

[JS] Changer la sélection d'un <select> - avec des événements

Logiciel Programmation
#1

Salut, j’ai une page avec un formu qui contient des champs de type <select>.
J’aimerai changer la selection d’un des selects avec des événements comme onchange principalement.

Voici un exemple :
2 selects, un premier qui va entrainer le changement de la sélection du second.

<select name=“Tri” id=“form_list_1_tri” onchange=“un truc ici”>
Qu’importe les options, lors de sa modif, il faudrait qu’il change la sélection du select qui suit.

	<select name="Nombre" id="form_list_1_nombre">
  <option value="all">Toutes</option>
  <option value="500">500 dernières</option>
  <option value="200">200 dernières</option>
  <option value="100">100 dernières</option>
  <option value="50" selected="selected">50 dernières</option>
	</select>

Lors de la modif du premier select, il faudrai que celui-ci séléctionne l’option de valeur “all” tout seul.

Merci de réfléchir à mon problème, j’imagine qu’il s’agit d’une méthode plus ou moins simple à réaliser. J’ai un peu regardé des cours de JS que j’ai trouvé sur le net, rien ne m’a indiqué correctement comment faire.

Merci d’avance ! :slight_smile:

#2

Tu peux t’inspirer de ça:


<html><head>
<script>
function truc()
{
a=document.getElementById("form_list_1_nombre");
b=document.getElementById("form_list_2_nombre");
b.selectedIndex=a.selectedIndex;
}
</script>
</head>
<body>
<select name="Nombre" id="form_list_1_nombre" onchange="truc()">
 <option value="all">Toutes</option>
 <option value="500">500 dernières</option>
</select>
<select name="Nombre" id="form_list_2_nombre">
 <option value="1">1</option>
 <option value="2">2</option>
</select>
</body>
</html>
#3

Merci !

Le JS :

function setNombreMax() {
	a = document.getElementById("form_list_1_nombre");
	a.selectedIndex = "all";
}

Les selects :

	<select name="Tri" id="form_list_1_tri" onchange="setNombreMax()">
  	<option value="robot">Tri par robot</option>
  	<option value="ennemy">Tri par cite</option>
  	<option value="status">Tri par statut</option>
  	<option value="date" selected="selected">Tri par date</option>
	</select>

	<select name="Nombre" id="form_list_1_nombre">
  <option value="all">Toutes</option>
  <option value="500">500 dernières</option>
  <option value="200">200 dernières</option>
  <option value="100">100 dernières</option>
  <option value="50" selected="selected">50 dernières</option>
	</select>
#4

A noter que tu peux itérer sur les éléments (machin.elements.length, elements[i], etc) pour changer la sélection.