TRAITEMENTS SUR LES SELECT , Source N°27983

Information sur la source

Catégorie :Tutoriaux Niveau : Débutant Date de création : 04/12/2004 Date de mise à jour : 08/12/2004 15:05:03 Vu : 10 728

Auteur : bultez

Site perso

Ecrire un message privé

Ce membre participe au partage de revenus publicitaires

Note :

7,29 / 10

1
2
3
4
5
6
7
8
9
10

Commentaire sur cette source (25)

Ajouter un commentaire et/ou une note

Description

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

<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>
: <input type="text"
class="Texte"
name="saisie">
</center><br/>
<input type="button"
value="Insérer
en tête"
class="Bouton"
onclick="ajout(0);"/>
<input type="button"
value="Insérer
avant ligne pointée"
class="Bouton"
onclick="ajout(1);"/>
<input type="button"
value="Insérer
après ligne pointée"
class="Bouton"
onclick="ajout(2);"/>
<input type="button"
value="Insérer
en fin"
class="Bouton"
onclick="ajout(3);"/>
<input type="button"
value="Insérer
'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
pointée vers le Bas"
class="Bouton"
onclick="deplace(1);">
<input type="button"
value="Déplacer la ligne
pointée vers le Haut"
class="Bouton"
onclick="deplace(-1);">
<input type="button"
value="Supprimer
la ligne pointée"
class="Bouton"
onclick="supprime();">
<input type="button"
value="Supprimer
toutes les Lignes"
class="Bouton"
onclick="sel.length=0; sel2.length=0;"/>
<center><br/>
<label class="Libelle">Rechercher</label>
: <input type="text"
class="Texte"
name="rech"
onkeyup="position(this.value);"><br/>
</center>
</BODY></HTML>

<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.

Historique

06 décembre 2004 05:21:37 :: comme demandé, j'ai ajouté la possibilité d'insérer une ligne, automatiquement classée par ordre alphabétique.
07 décembre 2004 13:05:21 :: ajout : détruire toutes les lignes pointer 2ème select en fonction du 1er modif : toLowerCase() mal placé
08 décembre 2004 15:05:04 :: comme demandé : ajouter/retirer un ligne vers/d' un autre select merci pour les suggessions...

Sources du même auteur

[CF) CHOIX D'UN FICHIER

[GAG] GESTION AJAX GÉNÉRALISÉE

[JEAN] JAVASCRIPT EXÉCUTÉ AVEC LA RÉPONSE D'AJAX, NASALODIGI...

[P.J.] PAGES JOURNALIÈRES ~ AGENDA ~ RENDEZ-VOUS ~

DIFFÉRENCES EN JAVASCRIPT [DJ]

Toutes les sources de bultez

Sources de la même categorie

DIFFÉRENCES EN JAVASCRIPT [DJ] par bultez

TRAITEMENT IMMÉDIAT DU CSS [TIC] par bultez

DESORGANISÉ UN TABLEAU : LA MÉTHODE SORT par jesusonline

J[AVA]SCRIPT ET .DLL OU UTILISATION D'UNE ROUTINE ÉCRITE DAN... par bultez

MIEUX QUE LES MS-AGENTS :: LES LIVING ACTOR (FONCTIONNE SOUS... par Joleroy

Toutes les sources de la catégorie Tutoriaux

Commentaires et avis

Commentaire de SweetSofiane le 05/12/2004 03:22:43

bonne idée de faire ceprogramme qui permet de d'ajouter des données a une liste deroulante mais j'aurais pereferez que :
1-l' ajout ce fait ss c'est bouton car ca serais plus partique
2-l'enregistrement ce fait par ordre alphabetique.

Commentaire de bultez le 05/12/2004 11:10:00

salut SweerSofiane

>>1-l' ajout ce fait ss c'est bouton
>>car ca serais plus partique
je n'ai pas compris la phrase.
>>2-l'enregistrement ce fait par ordre alphabetique.
je vais ajouter cette fonctionnalité.

et merci du commentaire car c'est comme
ça que les choses progressent.

Commentaire de rttb le 07/12/2004 17:03:36

Excellentissime !!!
Rien a redire ...
Sinon merci...

Commentaire de rttb le 08/12/2004 13:33:00

"Rien a redire ...", et bien si en fait, peut etre un fonction de transfert d'une valeur de la liste vers une autre liste vierge a la base.
Puis tant qu'a faire le transfert dans l'autre sens.

Commentaire de bultez le 08/12/2004 14:38:41

oh oui, rttb ! je vais faire...
merci pour l'aide ..

Commentaire de rttb le 10/12/2004 16:56:01

Encore une fois, superbe boulot, merci BUL.

Commentaire de roro06 le 16/12/2004 11:45:12

Excellent travail et complet... comme d'hab !
Mais ... ie only ..

Commentaire de bultez le 16/12/2004 13:00:57

salut roro06 et merci
IE only : sûrement, mais je ne pense
pas que l'adaptation soit trop difficile.
et si on me dit, je modifie...

Commentaire de roro06 le 16/12/2004 14:10:00

Je pense qu'en remplaçant systemetiquement sel par document.getElementById("sel"), sel2 par document.getElementById("sel2") etc ... et en ajoutant bien-sûr l'option id="sel", id="sel2" etc ... aux select, ça doit passer.
Je n'ai pas trop le temps de tester maintenant, mais si je peux, dans la journée ou demain, je regarderais.

Cordialement

Commentaire de bultez le 16/12/2004 14:28:43

ouais, ou mettre sel,sel2.. dans un formulaire
<form name="frm"...>...</form>
et remplacer sel#.??? par frm.sel#.???
( j'aime pas trop les getElementById("id") :
trop long à écrire entr'autres )
à ton avis : "y'a qu'ça" ?

Commentaire de roro06 le 16/12/2004 15:56:48

Je confirme, "YAK'SA"

Voici un code qui marche aussi sur NN:

<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"></script>
</HEAD>
<!==================================================>
<BODY>
<center>
<label  class="Libelle">ligne à insérer</label>
: <input  type="text"
      class="Texte"
      name="saisie"
  id="saisie">
</center><br/>
<input type="button"
      value="Insérer en tête"
      class="Bouton"
      onclick="ajout(0);"/>
<input type="button"
      value="Insérer avant ligne pointée"
      class="Bouton"
      onclick="ajout(1);"/>
<input type="button"
      value="Insérer après ligne pointée"
      class="Bouton"
      onclick="ajout(2);"/>
<input type="button"
      value="Insérer en fin"
      class="Bouton"
      onclick="ajout(3);"/>
<input type="button"
      value="Insérer 'alphabétiquement'"
      class="Bouton"
      onclick="ajout(4);"/><br/>
<center><br/>
<table>
<tr><td>
<select   name="sel" id="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" id="sel2"
        class="Liste"
        onclick="choix(this);"
        onchange="choix(this);"
        size=8>
<script type="text/javascript"></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"
id="sel3"
        class="Liste"
        size=8>
</select>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT></td></tr></table>
</center>
<br>
<input  type="button"
      value="Déplacer la ligne pointée vers le Bas"
      class="Bouton"
      onclick="deplace(1);">
<input  type="button"
      value="Déplacer la ligne pointée vers le Haut"
      class="Bouton"
      onclick="deplace(-1);">
<input  type="button"
      value="Supprimer la ligne pointée"
      class="Bouton"
      onclick="supprime();">
<input  type="button"
      value="Supprimer toutes les Lignes"
      class="Bouton"
      onclick="sel.length=0; sel2.length=0;"/>
<center><br/>
<label  class="Libelle">Rechercher</label>
: <input  type="text"
      class="Texte"
      name="rech"
      onkeyup="position(this.value);"><br/>
</center>
</BODY>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT></HTML>

( A mon sens, tu as tort, concernant DOM : C'est très pratique et je pense que c'est l'avenir. Long à écrire, je suis d'accord, mais on s'habitue, comme à la guitare ou au piano)

Cordialement

Commentaire de roro06 le 16/12/2004 15:59:55

Mh' ouais, pas évidentes à voir, les modifs ...

Voir lignes 357 à 360 et 383. Et bien-sûr les ID des select et input

Cordialement

Commentaire de Mrreivax le 01/08/2006 15:39:23

Ba oui! Ta source est bien mieux!
Bravo! Très bon travail! Félicitation!
Bonne Continuation!

Xavier

Commentaire de bultez le 01/08/2006 15:53:39

salut MRREIVAX,
Je ne l'ai citée que pour que tu
puisses t'en inspirer et améliorer
la tienne ( et il y en a d'autres
sur ce site : rechercher SELECT )
Aujourd'hui je ne ferai plus de la
même manière. @+

Commentaire de krikete le 28/05/2007 13:13:55

aparament vous maitriser les select je souahite recuperer la valeur selectioné mais je ne sais pas coment fair
si c possible pas avec php

Commentaire de

Trouver une ressource

TRAITEMENTS SUR LES SELECT