Select multiple con DIV pasando arrays a Javascript

Vamos a aprovechar el código Javascript creado en el post anterior para crear un campo <select> dinámico que contendrá una serie de artículos recuperados de la base de datos. Muy útil para la selección de varios articulos en varias listas desplegables.

Como siempre el código habla por sí solo:

  1. &lt;!-- Importamos del port de php a javascript&gt;
  2. &lt;script language="javascript" src="php.js"&gt;&lt;/script&gt;
  3. &lt;!-- Importamos el js creado en el post anterior&gt;
  4. &lt;script language="javascript" src="generar_fila.js"&gt;&lt;/script&gt;
  5. &lt;?php
  6.     // Si se ha pulsado el submit, procesamos datos que nos llegan
  7.     if ($_POST)
  8.     {
  9.       echo var_dump($_POST);
  10.       echo "&lt;br/&gt;";
  11.       echo "&lt;br/&gt;";
  12.       echo "&lt;b&gt;Articulos recibidos:&lt;/b&gt;&lt;br/&gt;";
  13.       for ($i=0;$i&lt;count($_POST['articulos']);$i++)
  14.         echo "id del articulo: " . $_POST['articulos'][$i] . "&lt;br/&gt;";
  15.      
  16.       echo "&lt;br/&gt;";
  17.     }
  18. ?&gt;
  19.  
  20. &lt;!-- Formulario principal de la pagina --&gt;
  21. &lt;form name="formulario" id="formulario" action="listas.php" method="post" enctype="multipart/form-data"&gt;
  22. &lt;?php
  23.  
  24. // imaginemos que esto lo sacamos de la base de datos,
  25. // pero ahora vamos a hacer un array de prueba
  26. $articulos_bd[] = array('id_articulo' =&gt; '1', 'nombre' =&gt; 'Powered');  
  27. $articulos_bd[] = array('id_articulo' =&gt; '2', 'nombre' =&gt; 'by');  
  28. $articulos_bd[] = array('id_articulo' =&gt; '3', 'nombre' =&gt; 'Linux');  
  29.  
  30. // creamos dos listas, una con los ids de los articulos recogidos presuntamente de la BD ($ids),
  31. // y otra lista con los nombres de dichos articulos ($array)
  32. $lista_articulos = '&lt;select id="articulos_0" name="articulos[]"&gt;
  33.  &lt;option selected value=""&gt;-Seleccione un art&iacute;culo-&lt;/option&gt;';
  34.   $ids[] = "";
  35.   $ids[] = "-Seleccione un art&iacute;culo-";
  36.   $array[] = "";
  37.   $array[] = "-Seleccione un art&iacute;culo-";
  38.  
  39.   // recorremos la lista de articulos del array supuestamente extraido de la BD
  40.   for ($i=0;$i&lt;count($articulos_bd);$i++)
  41.   {
  42.     // montamos un elemento &lt;select&gt;&lt;/select&gt; normal de HTML con los datos
  43.     // de los articulos recogidos de la BD
  44.     $lista_articulos.='&lt;option id="'.$articulos_bd[$i]['id_articulo'].'" name="'.$articulos_bd[$i]['id_articulo'].'"  value="'.$articulos_bd[$i]['id_articulo'].'"&gt;'.$articulos_bd[$i]['nombre'].'&lt;/option&gt;';
  45.     $ids[] = $articulos_bd[$i]['id_articulo'];
  46.     $array[] = $articulos_bd[$i]['nombre'];
  47.   }
  48.   $lista_articulos.='&lt;/select&gt;';  
  49.  
  50. // creamos un div que contendra los diferentes campos &lt;select&gt;&lt;/select&gt;
  51. // con todos los productos y sus datos asociados  
  52. echo '
  53.   &lt;div id="tabla"&gt;
  54.   &lt;b&gt;Art&iacute;culo relacionado:&lt;/b&gt;
  55.   '.
  56.    $lista_articulos;
  57.    ?&gt;
  58.    &lt;!-- A la funcion addCampo le voy a pasar el evento originado,
  59.         una cadena con los nombres de los articulos separados por comas,
  60.         y otra cadena con los ids de los articulos tambien separados por comas --&gt;
  61.    &lt;input type="button" class="boton" value="Añadir" onClick="addCampo(event,'&lt;?php echo implode(",", $array); ?&gt;', '&lt;?php echo implode(",", $ids); ?&gt;')" alt="Insertar"&gt;&nbsp;
  62.  
  63.   &lt;!-- continuamos la generacion del formulario --&gt;
  64.    &lt;?php echo '        
  65.   &lt;/div&gt;
  66.   &lt;br/&gt;
  67.   &lt;input type="submit" value="Submit"/&gt;
  68. &lt;/form&gt;';

Y como siempre, para estas cosas es necesaria una demostración

La lista de referencias utilizadas ha sido la siguiente:
http://www.trans4mind.com/personal_development/JavaScript2/createSelectDynamically.htm
http://www.cristalab.com/tips/32381/subir-multiples-archivos-con-php.html

A 1 persona le gusta esta entrada

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *