Varios cuadros de selección simples para reemplazar un cuadro de selección múltiple en HTML

Question

Me gustaría reemplazar un cuadro de selección múltiple como:

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

con un número arbitrario de cuadros de selección 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>  

¿Hay alguna forma de enviar y recuperar a través de POST una serie de cuadros de selección o debo intentar acceder a cada cuadro de selección llamado opciones (número) hasta que falle? Parece un poco sucio.

Debería poder enviar una acción para " eliminar este cuadro de selección " o " crear nuevo cuadro de selección " así que necesito alguna forma de distinguir los cuadros de selección.

Answer 1

Simplemente asigne a los elementos seleccionados el mismo nombre.

Los formularios HTML no tienen el concepto de " una matriz " ;. Cada biblioteca de manejo de formularios que maneja matrices de datos de entrada los genera a partir de un nombre que tiene varios valores:

foo=bar&foo=baz&aDifferentField=fizzbuzz

Esto es lo que generará una selección múltiple (llamada foo) con dos valores seleccionados (cuando hay un campo aDifferent en el formulario también).

A veces hay condiciones involucradas.

Perl's CGI.pm necesita la solicitud para que los datos estén en el contexto de la lista:

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

PHP requiere que el nombre termine con los caracteres '[]'

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

... pero todo se reduce a que los nombres sean los mismos (aunque los ID deben ser diferentes).

En cuanto a la eliminación:

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