Sélectionner toutes les options d'un select multiple

Version imprimable

Bonjour, je cherche à sélectionner toutes les options de mon select avant de faire un submit de mon formulaire.

Voici ma page :

Code:

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
<form id="form1" name="form1" method="POST" onsubmit="selectAll('teamPlayers'), selectAll('nonTeamPlayers')" action="save.php?job=saveTeamPlayers&teamID=<?php echo $teamId; ?>">
  <table width="460" border="0" cellspacing="2" cellpadding="5" align="center">
    <tr>
      <th scope="col" width="200">Players available</th>
      <th scope="col" width="50"></th>
      <th scope="col" width="200">Players of the Team</th>
    </tr>
    <tr>
      <td align="center">
        <select id="nonTeamPlayers[]" name="nonTeamPlayers" size="15" multiple="multiple" class="teamSelect">
        <?php
        //affichage des membres players       
        ?>
        </select>
      </td>
      <td align="center">
      <input name="button" type="button" onclick="transferPlayer('nonTeamPlayers[]', 'teamPlayers[]')" value=">>" /><br/><br/>
      <input name="button2" type="button" onclick="transferPlayer('teamPlayers[]', 'nonTeamPlayers[]')" value="<<" /></td>
      <td align="center">
        <select id="teamPlayers[]" name="teamPlayers" size="15" multiple="multiple" class="teamSelect">
          <option value="2">j2</option>
        </select>
      </td>
    </tr>
    <tr>
      <td align="right">
        <input type="button" name="Cancel" value="Cancel" onclick="location.href='admin.php?job=listTeam'" />
      </td>
      <td></td>
      <td>
      <input type="submit" name="Submit" value="Validate" />
      </td>
    </tr>
  </table>
</form>

Voici ma fonction javascript :

Code:

1
2
3
4
5
6
7
8
function selectAll(selectname)
{
	var selectbox = document.getElementsByName(selectname);
	for (var i = 0; i < selectbox.length; i++)
	{
		document.forms[0].selectbox.options[i].selected = "selected";
	}
}

J'obtiens comme réponse dans la console d'erreur : "selectbox.options has no properties".

J'ai essayé de plusieurs manières :
- document.selectbox.options[i].selected = "selected";
- selectbox.options[i].selected = "selected";
- document.form1.selectbox.options[i].selected = "selected";

Aucune ne fonctionne.

J'ajoute que j'ai déjà lu plusieurs topics comme celui-ci : http://www.developpez.net/forums/sho...+submit&page=2

mais rien n'y fait.

24/02/2008, 18h42
SpaceFrog

voilà ce que c'est de mettre des élements de forumlaire dans un tableau
24/02/2008, 19h47
dolu02

Qu'est ce que je devrais faire? Je viens d'essayer en enlevant les [] des id de mes select (et dans les appels de la fonction), ça ne marche toujours pas. :?
24/02/2008, 20h45
SpaceFrog

non dans une balise table ...

ton tableau masque les objets ...

Code:

document.getElementsByTagName('table')[0].getElementsByName(selectname)
24/02/2008, 21h27
dolu02

Ah j'ai compris pour la <table>.

Mais maintenant j'obtiens une autre erreur :

Code:

Erreur : document.getElementsByTagName("table")[0].getElementsByName is not a function

Sinon pour éviter les tableaux, y a quoi comme alternative? DIV+CSS?

Code:

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
</head>
 
<body>
<form id="form1" name="form1" method="POST" onsubmit="selectAll('teamPlayers'); selectAll('nonTeamPlayers'); return false" action="">
  <table width="460" border="0" cellspacing="2" cellpadding="5" align="center">
    <tr>
      <th scope="col" width="200">Players available</th>
      <th scope="col" width="50"></th>
      <th scope="col" width="200">Players of the Team</th>
    </tr>
    <tr>
      <td align="center">
        <select id="nonTeamPlayers[]" name="nonTeamPlayers" size="15" multiple="multiple" class="teamSelect">
        <option>lkjlkjlkj</option>
                <option>lkjlkjlkj</option>        <option>lkjlkjlkj</option>        <option>lkjlkjlkj</option>        <option>lkjlkjlkj</option>
        </select>
      </td>
      <td align="center">
      <input name="button" type="button" onclick="transferPlayer('nonTeamPlayers[]', 'teamPlayers[]')" value=">>" /><br/><br/>
      <input name="button2" type="button" onclick="transferPlayer('teamPlayers[]', 'nonTeamPlayers[]')" value="<<" /></td>
      <td align="center">
        <select id="teamPlayers[]" name="teamPlayers" size="15" multiple="multiple" class="teamSelect">
          <option value="2">j2</option>
                  <option>lkjlkjlkj</option>
                          <option>lkjlkjlkj</option>
        </select>
      </td>
    </tr>
    <tr>
      <td align="right">
        <input type="button" name="Cancel" value="Cancel" onclick="location.href='admin.php?job=listTeam'" />
      </td>
      <td></td>
      <td>
      <input type="submit" name="Submit" value="Validate" />
      </td>
    </tr>
  </table>
</form>
</body>
<script type="text/javascript">
function selectAll(selectname){
	var selectbox = document.getElementsByName(selectname)[0];
	var OL=selectbox.options.length;
	for (i = 0; i < OL; i++)
	{
		selectbox.options[i].selected = "selected";
	}
}
</script>
 
</html>

Code:

1
2
3
4
5
6
7
8
function selectAll(selectname)
{
	var selectbox = document.forms[0].elements[selectname];
	for (var i = 0; i < selectbox.length; i++)
	{
		selectbox.options[i].selected = true;
	}
}

25/02/2008, 10h49
dolu02

Merci beaucoup à vous 2!

Je dois juste faire un return true dans le onsubmit et garder mon action="xxxxxxx" pour arriver à mes fins, mais ça marche! :D