Formulaire select - Cours Javascript

Introduction

Info

Dans ce cours javascript, nous allons étudier les propriétés Javascript de la balise HTML et XHTML <SELECT>.
La balise HTML et XHTML SELECT va vous permettre de créer une liste déroulante à sélection unique, soit à sélection multiple.

Vous trouverez d'autres informations pour compléter ce cours javascript dans le chapitre :
L'objet javascript Select du Document Object Model HTML (DOM HTML)
L'objet javascript Option du Document Object Model HTML (DOM HTML

select Choix unique

Balise HTML et XHTML

HTML :
Exemple de code :
<select name="nom">
<option></option>
<option></option>
</select>

XHTML :
Exemple de code :
<select id="nom">
<option></option>
<option></option>
</select>

Changer la value

Vous pouvez changer connaître ou modifier la value de l'attribut HTML "value" d'une option :

Avant Après
Exemple de code :
<form name="f">

<select name="dmc">
  <option value="Choix 1" selected> Choix 1 </option>
  <option value="Choix 2"> Choix 2 </option>
  <option value="Choix 3"> Choix 3 </option>
</select>

<a href="#" onClick=" alert(document.forms.f.dmc.options[2].value) ">Avant</a>
<a href="#" onClick="document.forms.f.dmc.options[2].value ='cmd'; alert(document.forms.f.dmc.options[2].value)">Après</a>

</form>

Idem pour menus aux choix multiples.

Changer le texte

Vous pouvez changer le texte d'une option :

Avant    Après
Exemple de code :
<form name="f">

<select name="dmc">
  option value="Choix 1" selected>Choix 1</option>
  option value="Choix 2">Choix 2</option>
  option value="Choix 3">Choix 3</option>
</select>

<a href="#" onClick=" alert(document.forms.f.dmc.options[0].text)"> Avant </a>
<a href="#" onClick="document.forms.f.dmc.options[0].text='dmc'; alert(document.forms.f.dmc.options[0].text)"> Après </a>

</form>

Idem pour menus aux choix multiples.

Option sélectionnée

Vous pouvez trouver l'index l'option sélectionnée :
Voir l'option selectionnée.
Exemple de code :
<form name="f">

<select name="dmc">
  option value="Choix 1" selected> Choix 1 </option>
  option value="Choix 2"> Choix 2 </option>
  option value="Choix 3"> Choix 3 </option>
</select>

<a href="#" onClick = "alert('Choix '+(( document.forms.ff.dmc. options.selectedIndex) + 1) );"> Voir l'option sélectionnée. </a>

</form>

Ajouter

Vous pouvez ajouter une option :
Par exemple, visualisez le menu avant de cliquer:

Ajouter
Exemple de code :
<form name="f">

<select name="dmc">
  option value="Choix 1" selected>Choix 1</option>
  option value="Choix 2">Choix 2</option>
  option value="Choix 3">Choix 3</option>
</select>

<a href="#" onClick=ajoute();">Voir l'option selectionnée.</a>

</form>
<script language="JavaScript">
function ajoute(){
document.forms.f.dmc.options[document.forms.f.dmc.options.length] = new Option('dmc','cmd');
}
< /script>

Supprimer

Vous pouvez supprimer le contenu d'une option :

Par exemple, visualisez le menu avant de cliquer:

Ajouter
Exemple de code :
<form name="f">

  <select name="dmc">
  <option value="Choix 1" selected>Choix 1</option>
  <option value="Choix 2">Choix 2</option>
  <option value="Choix 3">Choix 3</option>
</select>

<a href="#" onClick=ajoute();"> Voir l'option sélectionnée.</a>

</form>
<script language="JavaScript">
function ajoute(){
  document.forms.fff.dmc.options[1]=new Option(' ',' ');
  // ou
  //document.forms.fff.dmc.options[1]=null;
}
</script>



Vous pouvez supprimer définitivement une option :

Par exemple, visualisez le menu avant de cliquer :

Supprimer l'option du menu
Exemple de code :
<form name="f">

<select name="dmc">
  <option value="Choix 1" selected>Choix 1</option>
  <option value="Choix 2">Choix 2</option>
  <option value="Choix 3">Choix 3</option>
  <option value="Choix 4">Choix 4</option>
  <option value="Choix 5">Choix 5</option>
</select>

<a href="#" onClick=ajouteSup();">Supprimer l'option du menu.</a>

</form>

<script language="javascript">
function ajouteSup(){
n=1; // index de l'option a supprimer
for (i = n; i < Number(document.forms.f.dmc.options.length-1); i++){
  document.forms.ff.dmc.options[i] = new Option((document.forms.f.dmc.options[ Number(i+1) ].text ),(document.forms.f.dmc.options[ Number(i+1) ].value) );
}
  document.forms.ff.dmc.options.length--;
}
</script>

Idem pour menus aux choix multiples.

Les événements

onBlur Quand on perd le focus de l'objet formulaire Select.
onChange Quand on fait un changement d'option dans l'objet formulaire Select.
onFocus Quand on prend le focus de l'objet formulaire Select.
Exemple de code :
<select name="dmc" onchange="action()">
  <option value="Choix 1" selected>Choix 1</option>
  <option value="Choix 2">Choix 2</option>
  <option value="Choix 3">Choix 3</option>
</select>

Les méthodes

blur(), Enlève le focus de l'objet formulaire Select.
focus() Met le focus de l'objet formulaire Select
handleEvent() Gestion des événements.
Exemple de code :
document.forms.formulaire.select.blur();

select Choix multiple

Balise

Exemple de code :
<select name="nom" multiple >
  <option></option>
  <option></option>
</select>

Récupérer les options séléctionnées

Vous pouvez récupérer les options sélectionnées :

Par exemple, sélectionnez plusieurs options :

Evaluer le nombre de sélections
Exemple de code :
<form name="f" multiple size="5>
<select name="dmc">
<option value="Choix 1" selected>Choix 1</option>
<option value="Choix 2">Choix 2</option>
<option value="Choix 3">Choix 3</option>
<option value="Choix 4">Choix 4</option>
<option value="Choix 5">Choix 5</option>
</select>
<a href="#" onClick=evaluation();">Evaluer.</a>
</form>

<script language="javascript">
function evaluation(){
var selectione="";
var Num=0;
for (i=0; i<document.forms.f.dmc.options.length; i++) {
  if (document.forms.f.dmc. options[i].selected ) {
    Num=Number(Num+1);
    selectione = selectione+"; "+document.forms.f.dmc.options[i].text;
  }
}
alert(Num+" choix : "+selectione);
}
</script>

Ajouter

Vous pouvez ajouter une option :

Par exemple, visualisez le menu avant de cliquer:

Ajouter
Exemple de code :
<form name="f" multiple size="5>
<select name="dmc">
  <option value="Choix 1" selected> Choix 1 </option>
  <option value="Choix 2"> Choix 2 </option>
  <option value="Choix 3"> Choix 3 </option>
  <option value="Choix 4"> Choix 4 </option>
  <option value="Choix 5"> Choix 5 </option>
</select>
<a href="#" onClick=ajoute ();">Ajouter une option.</a>
</form>

<script language="javascript">
function ajoute(){
  document.forms.f.dmc.options[document.forms.f.dmc.options.length] = new Option('dmc','cmd');
}
</script>

La vrai écriture de new Option est :
Exemple de code :
new Option('dmc', 'cmd', defaultSelect, select);

defaultSelect et select prennent la valeur de true ou false.
Chez moi, Internet Explorer me fait une grosse erreur "action non conforme" et se ferme. Alors bien tester avant d'utilisé cette forme.
Chapitre formulaire checkbox
Chapitre formulaire bouton