Creer dynamiquement les options d'un select en javascript

17 août 2008

Posté par Vincent

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>

Tags : Javascript

Partager cet article: