2008-12-18 9 views
6

Tengo un cuadro de lista en un formulario HTML con un botón Enviar. El cuadro de lista tiene habilitada la selección múltiple. Puedo seleccionar valores múltiples en el cuadro de lista, pero no sé cómo saber qué valores se seleccionaron cuando se envió el formulario. Además, estoy añadiendo valores generados por el usuario al cuadro de lista dinámicamente usando JavaScript, y me gustaría ser capaz de decir dos cosas cuando el formulario envía:Cómo publicar las selecciones de un cuadro de lista HTML con múltiples valores seleccionados

  1. ¿Cuáles son las opciones añadidas a la caja por el usuario?
  2. ¿Qué valores se seleccionan en el cuadro por el usuario?

¿Esto es posible? Gracias.

+2

es posible ... pero, ¿qué lenguaje de servidor estás usando? ya que parece ser de eso de lo que se trata el grueso de sus preguntas ... – Jack

Respuesta

4

A continuación encontrará un ejemplo de una página.

Tenga en cuenta que:

  • el elemento de selección (y cualquier elemento de formulario) necesita un nombre que debe incluirse en el puesto.
  • solo se publicarán las opciones seleccionadas en el elemento de selección.

¿Qué valores se seleccionan en este cuadro por el usuario?

Cuando el usuario envía el formulario solo se enviarán los valores seleccionados al servidor. Según el idioma que utilice en el servidor, existen diferentes formas de acceder a ellos.

¿Cuáles son las opciones agregadas al cuadro por el usuario?

Como se indicó anteriormente, solo se ven las opciones que se seleccionaron. ¿Pero cómo distingues entre tus opciones y las opciones de los usuarios? Eso depende de qué información envíe al usuario. La respuesta universal es que ese es el valor que recibes y que no enviaste. Sin embargo, esto se puede simplificar según sus datos. Dado que las opciones tienen tanto un valor como una propiedad de texto, una forma de usar un valor numérico para sus valores pregenerados. De esta forma, sus valores serán numéricos en la respuesta y los valores de los usuarios serán una cadena de texto. Este enfoque asume que su usuario no ingresará solo un valor numérico. Otro método consiste en añadir un prefijo a todos los valores generados por el usuario (recuerde que tiene un valor y un campo de texto para todas las opciones)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title>Test of select box</title> 
    <script type="text/javascript"> 
     function addOpt(e) { 
     var o=document.createElement("option"); 
     //o.value= -e.options.length; 
     o.text = "Test " + e.options.length; 
     o.selected=true; 
     e.add(o,null); 
     } 
    </script> 
    </head> 
    <body> 
    <form method="post" action="mypage.html"> 
     <input type="button" onclick="addOpt(this.form.myselect)" value="Add option"/> 
     <br/> 
     <select id="myselect" name="mydata" multiple="multiple" size="10"> 
     <option value="0">Test 0</option> 
     <option value="1">Test 1</option> 
     <option value="2">Test 2</option> 
     </select> 
     <br/> 
     <input type="submit"/> 
    </form> 
    </body> 
</html> 
+2

puede y probablemente debería hacerse sin javascript utilizando [] – aleemb

+0

@aleemb: ¿Cómo agrega [] respuestas "Cuáles son las opciones agregadas al cuadro por el usuario" y "¿Qué valores está seleccionado en el cuadro por el usuario"? Si realmente observa el javascript anterior, solo agrega opciones al cuadro de selección, lo que demuestra que el texto se usará como valor. – some

36

Al nombrar a su select con arrastrarse entre corchetes, PHP (y probablemente otros lenguajes de servidor) va a poner los datos en una matriz

ejemplo:

<form action="process.php" method="post"> 
    <select name="multiSelects[]" multiple="multiple" size="5"> 
    <option value="0">Zero</option> 
    <option value="1">One</option> 
    </select> 
    <input type="submit" /> 
</form> 

las selecciones estarán disponibles en la matriz $_POST['multiSelects']

+1

esto funciona en Node.js/Express.js – prototype

+0

Esto solo funciona con PHP como lenguaje del lado del servidor – Ejaz

+1

@Ejay: Esto debería funcionar en cualquier lenguaje estándar del lado del servidor que valga la pena codificar, – Mrchief

Cuestiones relacionadas