Traitements sur les select

Soyez le premier à donner votre avis sur cette source.

Snippet vu 22 054 fois - Téléchargée 31 fois

Commenter

Contenu du snippet

ajouter,supprimer,décaler vers le haut ou vers le bas,pointer, déplacer et "reprendre" ( d'un autre select ) une ligne dans un SELECT

Source / Exemple :

<HTML>
<HEAD>
<!==============================================================>
<TITLE> Fonctions sur Select  Décembre 2004 © marcel.Bultez@Tiscali.fr </TITLE>
<!==============================================================>
<style	TYPE="text/css">
.Bouton	{	cursor:hand;
					background-color:"#DDDDEE";
					font-family:"Verdana";
					width:120;
					font-size:"9px";
					font-weight:"bold";  }
.Libelle	{	cursor:default;
					color:"#800040";
					font-family:"Verdana";
					font-size:"9px";
					text-decoration: underline;
					font-weight:"bold"; 	}
.Liste		{	color:"#400040";
					background-color:"#00F0F0";
					font-family:"Verdana";
					font-size:"9px";
					font-weight:"bold"; 	}
.Texte		{	color:"#400040";
					border:0;
					width:250;
					height:14;
					background-color:"#C0C000";
					font-family:"Verdana";
					font-size:"9px";
					font-weight:"bold"; 	}
</style>
<script type="text/javascript"><!--------
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function retirer()	//~~ retirer de l'autre select ~~
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
{	if ( sel3.selectedIndex >=0 )
	{	saisie.value=sel3[sel3.selectedIndex].text;
		{for (var n=sel3.selectedIndex;n<sel3.length-1;n++)
			{ sel3[n].text=sel3[n+1].text; }
		sel3.length--;  }
		ajout(4);	}	}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function ajouter()	//~~ transférer vers autre select ~~
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
{	if ( sel.selectedIndex >=0 )
	{	sel3.length++;
		sel3[sel3.length-1].text=sel[sel.selectedIndex].text;
		supprime();		}	}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function choix(liste)	//~~ choix d'une ligne ~~
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
{	saisie.value=liste[liste.selectedIndex].text;
	var i=liste.selectedIndex;
	sel.selectedIndex=i;
	sel2.selectedIndex=i;		}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function supprime() //~~ suppression d'une ligne ~~
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
{ if (sel.selectedIndex>=0)
	{for (var n=sel.selectedIndex;n<sel.length-1;n++)
        { sel[n].text=sel[n+1].text; }
    sel.length--;
    sel2.length--;  }	}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function deplace(sens)  //~~ déplacer une ligne ~~
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
{ if (sel.selectedIndex+sens>=0 && sel.selectedIndex+sens<sel.length)
     {	var t=sel[sel.selectedIndex+sens].text;
		sel[sel.selectedIndex+sens].text=sel[sel.selectedIndex].text;
		sel[sel.selectedIndex].text=t;
		sel.selectedIndex=sel.selectedIndex+sens;  }  }
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function ajout(appel)   //~~ ajout d'un ligne ~~
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
{	var adr;
	switch (appel) {
		case 0:	//__ en tête __
			adr=0;
			break;
		case 1:	//__ avant __
			if (sel.selectedIndex<0)  return;
			adr=sel.selectedIndex;
			break;
		case 2:	//__ après __
			if (sel.selectedIndex<0)  return;
			adr=sel.selectedIndex+1;
			break;
		case 3:	//__ en fin __
			adr=sel.length;
			break;
		case 4:	//__ par ordre alphabétique __
			position(saisie.value);
			adr=sel.selectedIndex;
			break;		}
	sel.length++;
	for (var n=sel.length-1;n>adr;n--)
      { sel[n].text=sel[n-1].text;	}
	sel[adr].text=saisie.value;
	sel.selectedIndex=adr;
	sel2.length++;
	sel2[sel2.length-1].text=sel2.length;
	sel2.selectedIndex=adr;	 	}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function chgt(avant,apres,zone)	//~~ remplacer caractères génants ~~
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
{	var reg=new RegExp(avant,"g");
	return zone.replace(reg,apres);  }
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function position(rch)	//~~ rechercher ~~
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
{ 	var tmp=rch.toLowerCase();
	tmp=chgt("[àäâ]","a",tmp);		// les accents posent
	tmp=chgt("[éèêë]","e",tmp);		// un problème de 
	tmp=chgt("[ïî]","i",tmp);				// classement : en ASCII
	tmp=chgt("[ôö]","o",tmp);			// ils sont "après" la lettre
	tmp=chgt("[ùûü]","u",tmp);			// "z". le moins et l'espace
	tmp=chgt("[- ]","",tmp);				// sont ignorés.
	var pos;
	for (var n=0;n<sel.length;n++)
      {	pos=sel[n].text.toLowerCase();
			pos=chgt("[àäâ]","a",pos);
			pos=chgt("[éèêë]","e",pos);
			pos=chgt("[ïî]","i",pos);
			pos=chgt("[ôö]","o",pos);
			pos=chgt("[ùûü]","u",pos);
			pos=chgt("[- ]","",pos);
			if ( pos >= tmp )
			{ 	sel.selectedIndex=n;
				n=sel.length;	}	}	}
//--------></script>
</HEAD>
<!==================================================>
<BODY>
<center>
<label	class="Libelle">ligne à insérer</label>
:&nbsp;<input	type="text"
			class="Texte"
			name="saisie">
</center><br/>
<input type="button"
			value="Insérer&#13;&#10;en tête"
			class="Bouton"
			onclick="ajout(0);"/>
<input type="button"
			value="Insérer&#13;&#10;avant ligne pointée"
			class="Bouton"
			onclick="ajout(1);"/>
<input type="button"
			value="Insérer&#13;&#10;après ligne pointée"
			class="Bouton"
			onclick="ajout(2);"/>
<input type="button"
			value="Insérer&#13;&#10;en fin"
			class="Bouton"
			onclick="ajout(3);"/>
<input type="button"
			value="Insérer&#13;&#10;'alphabétiquement'"
			class="Bouton"
			onclick="ajout(4);"/><br/>
<center><br/>
<table>
<tr><td>
<select 	name="sel"
				class="Liste"
				onclick="choix(this);"
				onchange="choix(this);"
				size=8>
	<option>Afghanistan</option>
	<option>Afrique du sud</option>
	<option>Albanie</option> 
	<option>Algérie</option> 
	<option>Allemagne</option> 
	<option>Andorre</option> 
	<option>Angola</option> 
	<option>Antigua-et-Barbuda</option> 
	<option>Arabie</option> 
	<option>Argentine</option> 
	<option>Arménie</option> 
	<option>Australie</option> 
	<option>Autriche</option> 
	<option>Azerbaïdjan</option> 
	<option>Bahamas</option> 
	<option>Bahreïn</option> 
	<option>Bangladesh</option> 
	<option>Barbade</option> 
	<option>Belau</option> 
	<option>Belgique</option> 
	<option>Belize</option> 
	<option>Bénin</option> 
	<option>Bhoutan</option> 
	<option>Biélorussie</option> 
	<option>Birmanie</option> 
	<option>Bolivie</option> 
	<option>Bosnie-Herzégovine</option> 
	<option>Botswana</option> 
	<option>Brésil</option> 
	<option>Brunei</option> 
	<option>Bulgarie</option> 
	<option>Burkina</option> 
	<option>Burundi</option> 
	<option>Cambodge</option> 
	<option>Cameroun</option> 
	<option>Canada</option> 
	<option>Cap-Vert</option> 
	<option>Chili</option> 
	<option>Chine</option> 
	<option>Chypre</option> 
	<option>Colombie</option> 
	<option>Comores</option> 
	<option>Congo</option> 
	<option>Corée</option> 
	<option>Costa</option> 
	<option>Croatie</option> 
	<option>Cuba</option> 
	<option>Danemark</option> 
	<option>Djibouti</option> 
	<option>Dominique</option> 
	<option>Égypte</option> 
	<option>Équateur</option> 
	<option>Érythrée</option> 
	<option>Espagne</option> 
	<option>Estonie</option> 
	<option>États-Unis</option> 
	<option>Éthiopie</option> 
	<option>Fidji</option> 
	<option>Finlande</option> 
	<option>France</option> 
	<option>Gabon</option> 
	<option>Gambie</option> 
	<option>Géorgie</option> 
	<option>Ghana</option> 
	<option>Grèce</option> 
	<option>Grenade</option> 
	<option>Guatemala</option> 
	<option>Guinée</option> 
	<option>Guinée-Bissao</option> 
	<option>Guinée</option> 
	<option>Guyana</option> 
	<option>Haïti</option> 
	<option>Honduras</option> 
	<option>Hongrie</option> 
	<option>Inde</option> 
	<option>Indonésie</option> 
	<option>Iran</option> 
	<option>Iraq</option> 
	<option>Irlande</option> 
	<option>Islande</option> 
	<option>Israël</option> 
	<option>Italie</option> 
	<option>Jamaïque</option> 
	<option>Japon</option> 
	<option>Jordanie</option> 
	<option>Kazakhstan</option> 
	<option>Kenya</option> 
	<option>Kirghizistan</option> 
	<option>Kiribati</option> 
	<option>Koweït</option> 
	<option>Laos</option> 
	<option>Lesotho</option> 
	<option>Lettonie</option> 
	<option>Liban</option> 
	<option>Liberia</option> 
	<option>Libye</option> 
	<option>Liechtenstein</option> 
	<option>Lituanie</option> 
	<option>Luxembourg</option> 
	<option>Macédoine</option> 
	<option>Madagascar</option> 
	<option>Malaisie</option> 
	<option>Malawi</option> 
	<option>Maldives</option> 
	<option>Mali</option> 
	<option>Malte</option> 
	<option>Maroc</option> 
	<option>Marshall</option> 
	<option>Maurice</option> 
	<option>Mauritanie</option> 
	<option>Mexique</option> 
	<option>Micronésie</option> 
	<option>Moldavie</option> 
	<option>Monaco</option> 
	<option>Mongolie</option> 
	<option>Mozambique</option> 
	<option>Namibie</option> 
	<option>Nauru</option> 
	<option>Népal</option> 
	<option>Nicaragua</option> 
	<option>Niger</option> 
	<option>Nigeria</option> 
	<option>Norvège</option> 
	<option>Nouvelle-Zélande</option> 
	<option>Oman</option> 
	<option>Ouganda</option> 
	<option>Ouzbékistan</option> 
	<option>Pakistan</option> 
	<option>Panama</option> 
	<option>Papouasie</option> 
	<option>Paraguay</option> 
	<option>Pays-Bas</option> 
	<option>Pérou</option> 
	<option>Philippines</option> 
	<option>Pologne</option> 
	<option>Portugal</option> 
	<option>Qatar</option> 
	<option>Roumanie</option> 
	<option>Royaume-Uni</option> 
	<option>Russie</option> 
	<option>Rwanda</option> 
	<option>Saint-Christophe-et-Niévès</option> 
	<option>Sainte-Lucie</option> 
	<option>Saint-Marin </option> 
	<option>Saint-Vincent-et-les Grenadines</option> 
	<option>Salomon</option> 
	<option>Salvador</option> 
	<option>Samoa</option> 
	<option>Sao</option> 
	<option>Sénégal</option> 
	<option>Seychelles</option> 
	<option>Sierra</option> 
	<option>Singapour</option> 
	<option>Slovaquie</option> 
	<option>Slovénie</option> 
	<option>Somalie</option> 
	<option>Soudan</option> 
	<option>Sri</option> 
	<option>Suède</option> 
	<option>Suisse</option> 
	<option>Suriname</option> 
	<option>Trinité-et-Tobago</option> 
	<option>Tunisie</option> 
	<option>Turkménistan</option> 
	<option>Turquie</option> 
	<option>Tuvalu</option> 
	<option>Ukraine</option> 
	<option>Uruguay</option> 
	<option>Vanuatu</option> 
	<option>Vatican</option> 
	<option>Venezuela</option> 
	<option>Viêt Nam</option> 
	<option>Yémen</option> 
	<option>Yougoslavie</option> 
	<option>Zaïre</option> 
	<option>Zambie</option> 
	<option>Zimbabwe</option> 
</select>
<select	name="sel2"
				class="Liste"
				onclick="choix(this);"
				onchange="choix(this);"
				size=8>
<script type="text/javascript"><!--------
//~~~~~~~~~~~~~~~~~~~~~~~~
//~~ génération du 2ème select ~~
//~~~~~~~~~~~~~~~~~~~~~~~~
	for ( var n=0;n<sel.length;n++)
		{	document.writeln("<option>"+(n+1)+"</p></option>");	}
//--------></script>
</select>
</td>
<td>
<input	type="button"       
			value=">>>Ajouter>>>"
			class="Bouton"
			onclick="ajouter();"><br/>
<input	type="button"       
			value="<<<Retirer<<<"
			class="Bouton"
			onclick="retirer();">
</td><td>
<select	name="sel3"
				class="Liste"
				size=8>
</select>
</td></tr></table>
</center>
<br>
<input	type="button"       
			value="Déplacer la ligne&#13;&#10;pointée vers le Bas"
			class="Bouton"
			onclick="deplace(1);">
<input	type="button"       
			value="Déplacer la ligne&#13;&#10;pointée vers le Haut"
			class="Bouton"
			onclick="deplace(-1);">
<input	type="button"       
			value="Supprimer&#13;&#10;la ligne pointée"
			class="Bouton"
			onclick="supprime();">
<input	type="button"
			value="Supprimer&#13;&#10;toutes les Lignes"
			class="Bouton"
			onclick="sel.length=0; sel2.length=0;"/>
<center><br/>
<label	class="Libelle">Rechercher</label>
:&nbsp;<input	type="text" 
			class="Texte"
			name="rech"
			onkeyup="position(this.value);"><br/>
</center>
</BODY></HTML>

Conclusion :

comme on voit pas mal de questions sur les SELECT...
si vous pensez à des fonctions à inclure, dites le moi
et/ou envoyez les moi, je les ajouterai.
la présentation est assez basique, pour ne pas
dire moche, ce sont les fonctions qui comptent.

A voir également

Traitements sur les select
Javascript : Unité de traitement de la balise <select> avec tri - CodeS SourceS - Guide
Récupérer select de formulaire pour le traiter... ✓ - Forum - PHP
Renvoyer données dans select apres traitement ✓ - Forum - PHP
Traitement d'image java - Conseils pratiques - Java
Javascript récupérer valeur select onchange ✓ - Forum - PHP

Ajouter un commentaire

Commentaires

Signaler

KaiHo

Messages postés: 17
Date d'inscription: mercredi 27 août 2003
Statut: Membre
Dernière intervention: 28 décembre 2010

24 juil. 2010 à 00:44

Bravo Roro 06.

Franchement, tes modifs sont viables sous Firefox....

Que du bonheur !

Des jours que je cherche un script comme celui-là. J'ai encore beaucoup de boulot pour en faire ce que je veux, mais tu m'as épargné des heures de dépression

Signaler

Bul3

Messages postés: 4933
Date d'inscription: samedi 1 juillet 2006
Statut: Membre
Dernière intervention: 2 février 2015

8
9 janv. 2009 à 07:49

bah...

mettre sel,sel2.. dans un formulaire
<form name="frm"...>...</form>
et remplacer sel#.??? par frm.sel#.???

ou remplacer les sel# par
document.getElementById("sel#")
et ajouter id="sel#" sur les balises select

comme déjà dit, et je n'ai
pas fait de mise à jour pour ça.
@+

Signaler

mrhemp

Messages postés: 40
Date d'inscription: dimanche 23 février 2003
Statut: Membre
Dernière intervention: 24 février 2009

8 janv. 2009 à 18:19

Il est cool ton code, c'est dommage qu'il ne fonctionne pas avec Firefox.

Signaler

whitedwarfcabs

Messages postés: 3
Date d'inscription: lundi 14 mars 2005
Statut: Membre
Dernière intervention: 22 août 2007

22 août 2007 à 16:12

Il semblerait que vous méritiez vos 150.000 roupies (je vous avais pas dit?). Merci messieurs, je teste çà et je vous tiens au courant.
Merci encore
A+

Signaler

cs_bultez

Messages postés: 13616
Date d'inscription: jeudi 13 février 2003
Statut: Membre
Dernière intervention: 15 octobre 2013

32
21 août 2007 à 12:03

>>On partage quand meme les 150.000 dollars ^^ ?
pas de problèmes Mrreivax.
tu veux mon n° de compte bancaire ou tu
préfères m'envoyer un chèque ? dans ce
cas je te file mon adresse. ;-) @+

Afficher les 26 commentaires

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Traitements sur les select

Contenu du snippet

Source / Exemple :

Conclusion :

A voir également

Commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Du même auteur (cs_bultez)

Bullet mini editeur de textes multi-documents, coloration syntaxique multi-langages

[cf) choix d'un fichier

[gag] gestion ajax généralisée

[jean] javascript exécuté avec la réponse d'ajax, nasalodigitalement

[p.j.] pages journalières ~ agenda ~ rendez-vous ~

Source / Exemple :

Conclusion :

A voir également

Vous n'êtes pas encore membre ? inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Du même auteur (cs_bultez)

Bullet mini editeur de textes multi-documents, coloration syntaxique multi-langages

[cf) choix d'un fichier

[gag] gestion ajax généralisée

[jean] javascript exécuté avec la réponse d'ajax, nasalodigitalement

[p.j.] pages journalières ~ agenda ~ rendez-vous ~

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !