[DOM] DOM et select

Bonsoir, je cherche a représenter un select comme sur la photo que je vous ai joint.

J'ai déjà fait ceci :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<script type="text/javascript"> valueArray = new Array("Sélectionnez un service","Agences de voyage","Agences immobilières","Allergologues","Aménagement","Animaleries","Art et artisanat","Articles de Sport","Arts de la table","Auto écoles","Bars et Brasseries","Bijouteries","Boucheries Charcuteries","Boulangeries Pâtisseries","Bricolage","Carrosseries"); </script>   var sel = document.createElement("select"); sel.setAttribute("name", "quoi"); i=0; for (entry in valueArray) { if(i<94) { opt = document.createElement("option"); opt.text = opt.value = valueArray[entry]; sel.appendChild(opt); } i=i+1; }

---

Et qui me donne une liste déroulante toute simple que vous pouvez voir ici :
http://www.justacote.com/netvibes.php

Je pense qu'il faut utiliser

Code:

---

document.createElement('optgroup');

---

Mais je n'ai pas réussi, pourriez vous m'aider s'il vous plait ;)

Merci

Bon comme tu l'as dis il te faut utliser la balise <optgroup>.
Cette balise s'utilise comme ci dessous :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<select> <optgroup label="Europe"> <option>France</option> <option>Espagne</option> <option>Angleterre</option> </optgroup> <optgroup label="Amérique"> <option>Etats-Unis</option> <option>Mexique</option> <option>Canada</option> <option>Brésil</option> </optgroup> </select>

---

Il te faut donc génerer ce code à l'aide de JavaScript. Voila un petit exemple fais en vitesse je ne l'ai pas testé mais ca devrais être correcte.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<script type="text/javascript"> var select = document.createElement('select'); select.name = "monselect"; for (i=0;i<3;i++) { var optgrp = document.createElement('optgroup'); optgrp.label='label';   for(j=0; j<3; j++) { var option = document.createElement('option'); option.value = j; option.innerText = 'ok'; optgrp.appendChild(option); }   select.appendChild(optgrp); } </script>

---

J'espère avoir répondu à ta question ;-)