Liste simple et à choix multiples

**Enfa** · 30/06/2007, 22h50

Bonjour,

Imaginons que j'ai 2 boutons radio :

Code :

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

1
2
3
 
<INPUT type="radio" name="btRadio" value="choix1" onClick="liste_simple(this);">Choix 1
<INPUT type="radio" name="btRadio" value="choix2" onClick="liste_multiple(this);">Choix 2

Imaginons que j'ai une liste déroulante contenant les options suivantes :

Code :

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

1
2
3
4
5
6
 
<SELECT name="monSelect" id="monSelect"> 
    <OPTION value="1">OPTION 1 </OPTION> 
    <OPTION value="2">OPTION 2 </OPTION> 
    <OPTION value="3">OPTION 3 </OPTION> 
  </SELECT>

Le principe est simple : si je sélectionne "Choix 1" la liste doit être une liste simple pour que l'utilisateur ne puisse sélectionner qu'une seule option (et size doit être égal à 1). Inversement si je choisis "Choix 2" la liste doit être une liste à choix multiple (attributs : size=3 et multiple). Il faut donc que je mette des évènements onclick() sur les boutons radio (cf code sur les boutons radio) pour modifier la taille de la liste et la paramétrer comme multiple ou simple.

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
 
<head>
<script language="Javascript1.1">
function liste_simple(f)
{
// Paramétrer la taille de la liste à 1
// Supprimer le multiple
}
 
function liste_multiple(f)
{
// Paramétrer la taille de la liste à 3
// Paramétrer le multiple
}
</script>
</head>

Mon problème est que, malgré des recherches sur le Net et le forum, je ne sais pas comment manipuler les attributs size et multiple en Javascript.
Pour le size j'avais trouvé la solution suivante, mais cela ne marche pas (mes listes disparaissent et je n'ai pas d'erreur dans la console Javascript) :

Code :

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

1
2
 
document.getElementById("monSelect").style.width="x"

J'ai essayé de remplacer width par size; les listes ne disparaissent plus et je n'ai toujours pas d'erreur dans la console Javascript, mais la taille ne change pas. Pour info j'ai testé avec IE et Firefox.

Concernant le multiple j'ai même pas trouvé une piste.

Quelqu'un voit-il une solution pour le paramétrage de mon select ?
Merci.

**Auteur** · 01/07/2007, 12h14

bonjour,

Code html :

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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
 
<script type="text/javascript">
<!--
function type_liste(valeur)
{
  var liste = document.getElementById("idCombo");
  var i, n;
  n = liste.length;
 
  if (valeur.toLowerCase()=="true")
    liste.multiple = true;
  else
    liste.multiple = false;
 
  //Reinitialisation de la liste :
  liste.options[0].selected = true;
  for (i=1;i<n;i++)
    liste.options[i].selected = false;
}
 
//-->
</script>
 
</head>
 
<body>
<form action="" enctype="">
<div>
  <label for="idRadio1">Liste à choix simple</label><input type="radio" value="false" id="idRadio1" name="radio1" checked="checked" onclick="type_liste(this.value)"/>
  <label for="idRadio2">Liste à choix multiple</label><input type="radio" value="true" id="idRadio2" name="radio1" onclick="type_liste(this.value)"/>
  <br />
  <br />
 
<select size="4" id="idCombo" style="width: 120px">
    <option selected="selected" value="">Option 1</option>
    <option value="">Option 2</option>
    <option value="">Option 3</option>
    <option value="">Option 4</option>
    <option value="">Option 5</option>
    <option value="">Option 6</option>
    <option value="">Option 7</option>
    <option value="">Option 8</option>
    <option value="">Option 9</option>
    <option value="">Option 10</option>
    <option value="">Option 11</option>
    <option value="">Option 12</option>
</select>
 
</div>
 
</form>
 
 
 
</body>
 
</html>

**Enfa** · 02/07/2007, 09h41

Magnifique !

Merci beaucoup !

Liste simple et à choix multiples

JavaScript

Discussions similaires

Partager

Partager