11548 sujets

JavaScript, DOM et API Web HTML5

Empecher de choisir la même entrée dans deux listes déroulantes

Bonjour,

J'effectue une requete sur une table SQL. Je dois ensuite transmettre les informations d'un champs issue de cette requete dans deux listes déroulantes distinctes, de manière à faire une comparaison.

Je souhaiterai qu'une fois l'option choisi dans la premiere liste, l'utilisateur n'ai plus cette option visible dans la seconde liste, et ce sans raffraichir la page...

Je pense qu'il faille utiliser du javascript, avec action sur perte du focus, mais je ne suis pas sûr et surtout je suis plus théorique que pratique... Pourriez-vous me renseigner ?

Merci d'avance,
Guillaume
Modifié par Killamasta60 (04 Jun 2010 - 11:38)
Quelques chose comme cela pourrait permettre d'avancer...

<script type="text/javascript">
function $(j){return document.getElementById(j)}
function misajour(t){var j,o=$('scd').options;
	for (j=0;j<o.length;j++) o[j].disabled="";
	o[t.selectedIndex].disabled='disabled';
}</script>
</head>
<body>
<div>
<h2>Désactiver une liste</h2>
<p>L'option choisie en première liste n'est plus disponible dans la seconde</p>
<p><select id="prm" onchange="misajour(this)"><option>Une pierre</option>
<option>deux maisons</option>
<option>trois ruines</option>
<option>quatre fossoyeurs</option>
<option>un jardin</option>
<option>des fleurs</option>
<option>un raton laveur</option>
</select>
<select id="scd"><option>Une pierre</option>
<option>deux maisons</option>
<option>trois ruines</option>
<option>quatre fossoyeurs</option>
<option>un jardin</option>
<option>des fleurs</option>
<option>un raton laveur</option>
</select></p>
<p>(Jacques prévert)</p>

</div>
</body>

Après, avec des listes différentes, il suffit de comparer les valeurs des options
for (j=0;j<o.length;j++) 
if (o[j].text!=t.options[t.selectedIndex].text) o[j].disabled="";
else o[j].disabled='disabled';

Modifié par Julien de Prabere (04 Jun 2010 - 18:14)
Sujet clos
Aller à