Traitements sur les select
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
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.
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>
: <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>
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
- Select distinct ✓ - Forum SQL
- Select sum ✓ - Forum SQL
- Select sum sur plusieurs tables ✓ - Forum SQL
- Select * from select - Forum SQL
- Linq select - Forum C# / .NET
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.