Discussion :

[PIEPLU]

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

J'ai déjà fait ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

document.createElement('optgroup');

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

Merci

[bombaklat]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ;-)