1. Accueil
  2. Tous les snippets
  3. Snippets Javascript
  4. Traitements sur les select

Traitements sur les select

Soyez le premier à donner votre avis sur cette source.

Snippet vu 21 991 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

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
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
 7
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
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
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
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
 30
>>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.

Du même auteur (cs_bultez)