Plusieurs zones de sélection simples pour remplacer une zone de sélection multiple en HTML

Question

J'aimerais remplacer une zone de sélection multiple telle que:

<select multiple="multiple" name="options">  
<option value="option1">option1</option>  
<option value="option2">option2</option>  
...  
</select>

avec un nombre arbitraire de cases de sélection simples:

<select name="options1">  
<option value="option1">option1</option>  
<option value="option2">option2</option>  
...  
</select>  

<select name="options2">  
<option value="option1">option1</option>  
<option value="option2">option2</option>  
...  
</select>  

Existe-t-il un moyen d’envoyer et de récupérer via POST un tableau de boîtes de sélection ou dois-je essayer d’accéder à toutes les boîtes de sélection nommées options (nombre) jusqu’à ce qu’elles échouent? Semble un peu sale.

Je devrais pouvoir soumettre une action pour "supprimer cette zone de sélection". ou "créer une nouvelle zone de sélection". j'ai donc besoin d'un moyen de distinguer les cases à cocher.

Answer 1

Donnez simplement le même nom aux éléments sélectionnés.

Les formulaires HTML n'ont pas de concept de "tableau". Chaque bibliothèque de traitement de formulaire gérant des tableaux de données en entrée les génère à partir d'un nom comportant plusieurs valeurs:

foo=bar&foo=baz&aDifferentField=fizzbuzz

C’est ce qu’une sélection multiple (nommée foo) avec deux valeurs sélectionnées va générer (quand il y a 'aDifferentField' dans le formulaire également).

Parfois, des réserves sont impliquées.

Le fichier CGI.pm de Perl a besoin de la demande pour que les données soient dans le contexte de liste:

my @foos = $cgi->param('foo');

PHP requiert que le nom se termine par les caractères '[]'

name="foo[]"
foo[]=bar&foo[]=baz&aDifferentField=fizzbuzz

… mais tout dépend du fait que les noms sont identiques (bien que les identifiants soient toujours différents).

Quant à la suppression:

<label for="foo5">Group 5</label>
<select name="foo" id="foo5">
    <option value="delete_foo5">Delete this group</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>