Aller au contenu

Vincent

  • billets
    15
  • commentaires
    4
  • visualisations
    60 220

Creer dynamiquement les options d'un select en javascript

Vincent

4 351 vues

Aujourd'hui, voici une petite portion de code javascript qui vous aidera à creer dynamiquement, à partir d'un premier select, la liste des valeurs éligible sur le 2e select qui lui dépend.

Ici, par exemple, nous allons créer dynamiquement la liste des départements correspondant à une région. (Je vous ai mis les valeurs des 2 premières régions seulement)


<html>
<head>
<title>test</title>
<script language="JavaScript">
function defRegion()
{
var frmRegion = document.getElementById("inscription");
var selRegion = document.getElementById("bc_reg");
var selDpt = document.getElementById("bc_dpt");
var indiceRegion = bc_reg.value;

// Temps que selDpt contient des noeuds...
while (selDpt.hasChildNodes())
{
// Supprime le premier noeud.
selDpt.removeChild(selDpt.firstChild);
}

//choix vide
var opt = document.createElement("option");
opt.setAttribute("value", "");
var itmText = document.createTextNode("Faites votre choix");
opt.appendChild(itmText);
selDpt.appendChild(opt);


// Suivant la région sélectionnée...
switch (indiceRegion)
{
case "1_s":

// Créé un noeud pour la liste.
var opt = document.createElement("option");
opt.setAttribute("value", 167);
var itmText = document.createTextNode("Bas-Rhin");
opt.appendChild(itmText);
selDpt.appendChild(opt);

var opt = document.createElement("option");
opt.setAttribute("value", 168);
var itmText = document.createTextNode("Haut-Rhin");
opt.appendChild(itmText);
selDpt.appendChild(opt);

break;

case "2_s":

// Créé un noeud pour la liste.
var opt = document.createElement("option");
opt.setAttribute("value", 124);
var itmText = document.createTextNode("Dordogne");
opt.appendChild(itmText);
selDpt.appendChild(opt);
var opt = document.createElement("option");
opt.setAttribute("value", 133);
var itmText = document.createTextNode("Gironde");
opt.appendChild(itmText);
selDpt.appendChild(opt);
var opt = document.createElement("option");
opt.setAttribute("value", 140);
var itmText = document.createTextNode("Landes");
opt.appendChild(itmText);
selDpt.appendChild(opt);
var opt = document.createElement("option");
opt.setAttribute("value", 147);
var itmText = document.createTextNode("Lot-et-Garonne");
opt.appendChild(itmText);
selDpt.appendChild(opt);
var opt = document.createElement("option");
opt.setAttribute("value", 164);
var itmText = document.createTextNode("Pyrénées-atlantiques");
opt.appendChild(itmText);
selDpt.appendChild(opt);

break;

}
}
</script>
</head>
<body onLoad="java script:defRegion();">
<FORM id="inscription" name="inscription">
<SELECT id="bc_reg" name="bc_reg" onChange="java script:defRegion();">
<optgroup label="Région">
<option value="1_s" selected="Selected">Alsace</option>
<option value="2_s">Aquitaine</option>
</SELECT>
<SELECT id="bc_dpt" name="bc_dpt">
</SELECT>
</FORM>
</body>
</html>



0 Commentaire


Commentaires recommandés

Aucun commentaire à afficher.

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant
×