Discussion :

[DevCom59]

bonjours à tous !

Je m'entraine à faire du JavaScript et j'ai voulu faire deux select avec options dynamiques (PHP,HTML),
le premier récupère le contenue de la base de données et le second récupère les options sélectionnées dans le premier select ! Jusque la tout va bien , fier de moi et tout ^^
je l’intègre dans un formulaire pour récupérer les valeurs de mon deuxième select via un POST sauf qu'il ne retourne que la dernière valeur sélectionnées !
j'ai essayé de mettre le nom de mon select comme ceci : selected_adresses[] mais alors ma fonction JavaScript ne fonctionne plus :/

Quand je met le nom de mon select comme ceci : selected_adresses


qu'une valeur dans mon tableau -> Array ( [0] => test1@hotmail.fr )

Quand je met le nom de mon select comme ceci : selected_adresses[]

impossible d'ajouter ><


ma fonction JavaScript :

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
function addAddress() {
	var s = window.document.contacts.search_results;
	var d = window.document.contacts.selected_addresses;
	if (s.selectedIndex < 0) {
		alert("Aucun mail n'a était trouvé !");
		return false;
	} else {
		for (var i = 0; i < s.length; i++) {
			var item = s.options[i];
			if (item.selected) {
				d.options[d.length] = new Option(item.text, item.value, item.selected);
			}
		}
	}
}

coté HTML :

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
<td id="tableAjout">
    <select ondblclick="addAddress()" onchange="document.contacts.search_results[-1].selected=false" multiple="multiple" size="10" name="search_results" style="width: 250px;">
<?php while($liste_club = $query_club->fetch()) {  ?>
	<option value="<?php echo $liste_club["mail_club"]; ?>"><?php echo $liste_club["nom_club"]; ?></option>
<?php  } ?>					
    </select>
</td>
<td id="tableAjout">
    <INPUT class="button" style="WIDTH: 60px" onclick="addAddress();" type="button" value=">>>"> 
    <br/><br/> 
    <INPUT class="button" style="WIDTH: 60px" onclick="removeAddress();" type="button" value="<<<"> 
</td>		
<td id="tableAjout">
    <select onChange="window.document.contacts.selected_addresses[-1].selected=true"  multiple="multiple" size=10 name="selected_addresses" style="width: 250px;">
    </select>
</td>

Merci de m'aider !

PS: Quand on passe le formulaire en GET on peut voir dans la barre de lien tout les adresses !

[sekaijin]

http://www.w3schools.com/tags/att_select_multiple.asp

[DevCom59]

Pourquoi tu me donne cette page ? mon select est déjà en multiple, mon problème vient de mon JS quand je passe mon select en Array il bloque...

[Watilin]

j'ai essayé de mettre le nom de mon select comme ceci : selected_adresses[] mais alors ma fonction JavaScript ne fonctionne plus :/

C'est en effet la bonne syntaxe si tu veux que ton serveur reçoive toutes les données. En JavaScript, c'est toujours possible d'accéder au <select> mais il faut ruser un petit peu. Remplace :

Code :

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

document.contacts.search_results

par :

Code :

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

document.contacts['search_results[]']

Et ça devrait marcher.

Il reste un problème avec ce search_results[-1]. Il n'y a pas d'index -1 dans un <select>. Je suppose que tu as voulu dire « le dernier sélectionné », mais ce n'est pas aussi simple : le navigateur ne mémorise pas quelle est la dernière option sélectionnée. Il faudrait que tu compares les entrées actuellement sélectionnées dans le <select> de gauche avec celles présentes dans le <select> de droite… Ou alors je n'ai pas compris ce que tu voulais faire.

PS: Quand on passe le formulaire en GET on peut voir dans la barre de lien tout les adresses !

Oui, c'est tout à fait normal.

Edit: dans le lien posté par Sekaijin il est souligné que les <select> multiples ne sont pas très ergonomiques et qu'il est préférable d'utiliser des checkboxes à la place. Voici un exemple minimaliste :

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
65
66
67
68
<?php
 
error_reporting(E_ALL);
 
// classe stub en remplacement de la base de données
class QueryClubStub {
 
   private $i;
 
   public function __construct() {
      $this->i = 0;
   }
 
   // génère des données fictives
   public function fetch() {
      if (isset(self::$clubs[$this->i])) {
         $nom = self::$clubs[$this->i];
         $this->i++;
         return [
            'mail_club' => preg_replace('/[. ]+/', '-', strtolower($nom)) . '@example.com',
            'nom_club'  => $nom
         ];
      }
      return null;
   }
 
   private static $clubs = [
      'Judo St Genis Pouilly',
      'J.C.A.S. Peronnas',
      'Judo club Bagesien',
      'Saint Denis dojo',
      'Judo Kodokan Amberieux'
   ];
}
 
$query_club = new QueryClubStub();
 
?>
<!DOCTYPE html>
<html lang=fr>
<head>
   <meta charset=utf-8>
   <title>Select multiple</title>
</head>
<body>
 
<form method="POST">
   <ul>
      <?php while($liste_club = $query_club->fetch()) {
         echo "<li>
            <label>
               <input type='checkbox' name='search_results[]' value='{$liste_club['mail_club']}'>
               {$liste_club['nom_club']}
            </label>
         </li>";
      } ?>
   </ul>
   <input type="submit">
</form>
 
<?php if (isset($_POST['search_results'])) {
   echo '<pre>';
   print_r($_POST['search_results']);
   echo '</pre>';
} ?>
 
</body>
</html>

Avec ça, il est toujours possible de rajouter du CSS pour que ça ressemble à un select, et éventuellement cacher les checkboxes.

[DevCom59]

d'accord comment a partir d'un checkbox remplir le second en fonction des éléments choisis dans le premier ?

PS : document.contacts['search_results[]'] ne marche pas ou je ne sais pas le faire ^^'

[Watilin]

Tu es essayé mon exemple ?

Le truc c'est que grâce à cette solution, tu n'as plus besoin du 2me <select>.

Si ton <form> a bien le nom "contacts" et ton <select> le nom "search_results[]", je ne vois pas de raison que ça ne marche pas. Ça sera sans doute plus simple si tu utilises un id (mais avec ma solution, tu n'en as pas besoin).