select options


<?xml version="1.0" encoding="iso-8859-1"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">

<head>

<title>Change options de select</title>

<script type="text/javascript">

// declaration en global des options qu'on va utiliser :

var opt_20GO, opt_40GO, opt_60GO, opt_80GO;

var opt_128Mo, opt_256Mo, opt_512Mo;

opt_20GO = new Option("DD 20GO", "20GO");

opt_40GO = new Option("DD 40GO", "40GO");

opt_60GO = new Option("DD 60GO", "60GO");

opt_80GO = new Option("DD 80GO", "80GO");

opt_128Mo = new Option("Memoire 128Mo", "128Mo");

opt_256Mo = new Option("Memoire 256Mo", "256Mo");

opt_512Mo = new Option("Memoire 512Mo", "512Mo");



function ChoixCat(sel) {

  var opt = sel.options[sel.selectedIndex]; // option selectionnée

  var selProduit = document.getElementById("Produit");

  selProduit.options.length = 0; // vide le tableau d'options

  switch(opt.value) {

    case "none" :

      selProduit.style.visibility = "hidden"; // cache selProduit

      break;

    case "DD" :

      selProduit.style.visibility = ""; // montre selProduit

      // ajoute, a la fin du tableau options[], l'option opt_20GO :

      selProduit.options[selProduit.options.length] = opt_20GO;

      // ajoute, a la fin du tableau options[], l'option opt_40GO :

      selProduit.options[selProduit.options.length] = opt_40GO;

      selProduit.options[selProduit.options.length] = opt_60GO;

      selProduit.options[selProduit.options.length] = opt_80GO;

      break;

    case "Mem" :

      selProduit.style.visibility = ""; // montre selProduit

      selProduit.options[selProduit.options.length] = opt_128Mo;

      selProduit.options[selProduit.options.length] = opt_256Mo;

      selProduit.options[selProduit.options.length] = opt_512Mo;

      break;

  }

}

</script>

</head>

<body>



<form>

  <select name="Categorie" id="Categorie" onChange="ChoixCat(this)">

    <option value="none">-- Categorie --</option>

    <option value="Mem">Memoire</option>

    <option value="DD">Disque Dur</option>

  </select>



  <select name="Produit" id="Produit" style="visibility:hidden">

  </select>

</form>



</body>

</html>