Ce script est déclaré obsolète. Il n'est conservé que pour information.

Script : Ordonner une liste

Vous pouvez déplacer les lignes d'une liste de formulaire avec les boutons "Monter" et "Descendre".

<HTML><HEAD>
<TITLE>Tout JavaScript.com - Ordonner une liste</TITLE>
<SCRIPT LANGUAGE="JavaScript">
// D'autres scripts sur http://www.toutjavascript.com
// Script créé par Tout JavaScript.com

function tjs_haut(l) {
	var indice=l.selectedIndex
	if (indice<0) {
		alert("Aucune ligne n'est sélectionnée");
	}
	if (indice>0) {	// Il reste une ligne au-dessus
		tjs_swap(l,indice,indice-1);
	}
}

function tjs_bas(l) {
	var indice=l.selectedIndex
	if (indice<0) {
		alert("Aucune ligne n'est sélectionnée");
	}
	if (indice<l.options.length-1) {	// Il reste une ligne en-dessous
		tjs_swap(l,indice,indice+1);
	}
}

function tjs_swap(l,i,j) {
	var valeur=l.options[i].value;
	var texte=l.options[i].text;
	l.options[i].value=l.options[j].value;
	l.options[i].text=l.options[j].text;
	l.options[j].value=valeur;
	l.options[j].text =texte;
	l.selectedIndex=j
	tjs_ordre(l.form);
}

function tjs_ordre(f) {
	var l=f.liste;
	var ordre="";
	for(var i=0;i<l.options.length;i++) {
		if (i>0) {ordre+="-";}
		ordre+=l.options[i].value;		
	}
	f.ordre.value=ordre;
}

</SCRIPT>
</HEAD>
<BODY text="#000000" bgcolor="#FFFFFF" alink="#FF8C00" link="#FF8C00" vlink="#FF8C00" onload='tjs_ordre(document.forms[0])'>
<FONT FACE="Arial" SIZE='-1' COLOR="#000099">
<B><CENTER><BIG>Ordonner une liste SELECT</BIG></CENTER></B><BR>
<BR>
Sélectionnez une ligne de la liste.<BR>
Vous pouvez la déplacer avec les boutons "Monter" et "Descendre".<BR>
Une fonction permet de générer une chaine avec les valeurs de la liste. C'est très utile pour passer l'ordre de la nouvelle liste lors du submit du formulaire pour le traiter en PHP ou ASP.<BR>

<FORM name="tjsform">
	<TABLE border=0>
		<TR>
			<TD valign=top>
				<SELECT name='liste' size='5' style='width:300px'>
					<OPTION value="1">Ligne 1</OPTION>
					<OPTION value="2">Ligne 2</OPTION>
					<OPTION value="3">Ligne 3</OPTION>
					<OPTION value="4">Ligne 4</OPTION>
					<OPTION value="5">Ligne 5</OPTION>
					<OPTION value="6">Ligne 6</OPTION>
				</SELECT>
			</TD>
			<TD valign=top>
				<INPUT type=button value='Monter' style='width:100px' onClick='tjs_haut(this.form.liste)'>
				<BR>
				<INPUT type=button value='Descendre' style='width:100px' onClick='tjs_bas(this.form.liste)'>
			</TD>
		</TR>
	</TABLE>	
		
	</SELECT>
	Ordre de la liste : <INPUT type=text name=ordre>
</FORM>

<BR><BR><BR><BR><BR>
<CENTER><A href='http://www.toutjavascript.com' target='_blank'><FONT size=1 color=#CCCFFF>Tout JavaScript.com</FONT></A>

</FONT>
</BODY></HTML>

Exécution du script

Code source

<HTML><HEAD><TITLE>Tout JavaScript.com - Ordonner une liste</TITLE><SCRIPT LANGUAGE="JavaScript">// D'autres scripts sur http://www.toutjavascript.com// Script créé par Tout JavaScript.comfunction tjs_haut(l) {    var indice=l.selectedIndex    if (indice<0) {        alert("Aucune ligne n'est sélectionnée");    }    if (indice>0) {    // Il reste une ligne au-dessus        tjs_swap(l,indice,indice-1);    }}function tjs_bas(l) {    var indice=l.selectedIndex    if (indice<0) {        alert("Aucune ligne n'est sélectionnée");    }    if (indice<l.options.length-1) {    // Il reste une ligne en-dessous        tjs_swap(l,indice,indice+1);    }}function tjs_swap(l,i,j) {    var valeur=l.options[i].value;    var texte=l.options[i].text;    l.options[i].value=l.options[j].value;    l.options[i].text=l.options[j].text;    l.options[j].value=valeur;    l.options[j].text =texte;    l.selectedIndex=j    tjs_ordre(l.form);}function tjs_ordre(f) {    var l=f.liste;    var ordre="";    for(var i=0;i<l.options.length;i++) {        if (i>0) {ordre+="-";}        ordre+=l.options[i].value;            }    f.ordre.value=ordre;}</script></HEAD><BODY text="#000000" bgcolor="#FFFFFF" alink="#FF8C00" link="#FF8C00" vlink="#FF8C00" onload='tjs_ordre(document.forms[0])'><FONT FACE="Arial" SIZE='-1' COLOR="#000099"><B><CENTER><BIG>Ordonner une liste SELECT</BIG></CENTER></B><BR><BR>Sélectionnez une ligne de la liste.<BR>Vous pouvez la déplacer avec les boutons "Monter" et "Descendre".<BR>Une fonction permet de générer une chaine avec les valeurs de la liste. C'est très utile pour passer l'ordre de la nouvelle liste lors du submit du formulaire pour le traiter en PHP ou ASP.<BR><FORM name="tjsform">    <TABLE border=0>        <TR>            <TD valign=top>                <SELECT name='liste' size='5' style='width:300px'>                    <OPTION value="1">Ligne 1</OPTION>                    <OPTION value="2">Ligne 2</OPTION>                    <OPTION value="3">Ligne 3</OPTION>                    <OPTION value="4">Ligne 4</OPTION>                    <OPTION value="5">Ligne 5</OPTION>                    <OPTION value="6">Ligne 6</OPTION>                </SELECT>            </TD>            <TD valign=top>                <INPUT type=button value='Monter' style='width:100px' onClick='tjs_haut(this.form.liste)'>                <BR>                <INPUT type=button value='Descendre' style='width:100px' onClick='tjs_bas(this.form.liste)'>            </TD>        </TR>    </TABLE>                </SELECT>    Ordre de la liste : <INPUT type=text name=ordre></FORM><BR><BR><BR><BR><BR><CENTER><A href='http://www.toutjavascript.com' target='_blank'><FONT size=1 color=#CCCFFF>Tout JavaScript.com</FONT></A></FONT></BODY></HTML><!-- D'autres scripts et des conseils sur http://www.toutjavascript.com -->

Troisième édition Tout JavaScript chez Dunod

En savoir plus
Sortie le 4 janvier 2023

Version papier 29€90
Format électronique 22€99.

Commandez en ligne

Dunod Fnac Amazon

Le graph des objets JavaScript

Chargement
en cours...

Script : Ordonner une liste

Exécution du script

Code source

Troisième édition Tout JavaScript chez Dunod

Chercher une fonction, un objet, ...

Le graph des objets JavaScript