Voici un code qui permet à un utilisateur d'ordonner comme bon lui semble une liste (déroulante ou pas)
<HTML>
<script type="text/javascript">
var Obj=null;
function Deplacer(sens){
if(Obj==null){return false;};
var OptionSel= Obj.selectedIndex;
switch (true){
case ( Obj.length == -1 & sens==-1):
alert('Pas d\'option à déplacer');
break;
case(OptionSel== -1):
alert('Selectionnez une option à déplacer');
break;
case(Obj.length==0):
alert('Il n\'y a qu\'une option \!');
break;
case(OptionSel== 0 && sens==-1):
alert('La première option ne peut être déplacée');
break;
case(OptionSel== Obj.length-1 && sens==1):
alert('La dernière option ne peut être déplacée');
break;
case(sens==-1):
var moveText1 = Obj[OptionSel-1].text;
var moveText2 = Obj[OptionSel].text;
var moveValue1 = Obj[OptionSel-1].value;
var moveValue2 = Obj[OptionSel].value;
Obj[OptionSel].text = moveText1;
Obj[OptionSel].value = moveValue1;
Obj[OptionSel-1].text = moveText2;
Obj[OptionSel-1].value = moveValue2;
Obj.selectedIndex = OptionSel-1;
break;
case(sens==1):
var moveText1 = Obj[OptionSel].text;
var moveText2 = Obj[OptionSel+1].text;
var moveValue1 = Obj[OptionSel].value;
var moveValue2 = Obj[OptionSel+1].value;
Obj[OptionSel].text = moveText2;
Obj[OptionSel].value = moveValue2;
Obj[OptionSel+1].text = moveText1;
Obj[OptionSel+1].value = moveValue1;
Obj.selectedIndex = OptionSel+1;
break;
}
}
</script>
<BODY>
<FORM>
<select name="tag1" id="tag1" size="8" STYLE="WIDTH: 200px"
onclick="Obj=this;" style="float:left;">
<option value="0">TEST1</option>
<option value="1">TEST2</option>
<option value="2">TEST3</option>
<option value="3">TEST4</option>
<option value="4">TEST5</option>
<option value="5">TEST6</option>
<option value="6">TEST7</option>
<option value="7">TEST8</option>
</select>
<div style="float:left;"><br/>
<br/>
<input type="button" name="boutMonter" id="boutMonter" value="Monter"
onClick="Deplacer(-1);" style="width:80px"/><br/><br/>
<input type="button" name="boutDesc" id="boutDesc" value="Descendre"
onClick="Deplacer(1);" style="width:80px"/>
</div>
</FORM>
</BODY>
</HTML>
|
Grâce à ce code, lorsque l'on clique sur sur un item de la liste pour le déplacer,
la variable Obj prend la valeur de la liste déroulante.
Ainsi, dans la fonction deplacer, la variable Obj fait appel à la liste en question.
La variable OptionSel ne sert qu'à raccourcir les ligne de codes. Elle évite ainsi d'avoir à retaper à chaque fois Obj.selectedIndex.
|