Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Generar option select a partir de otro select de cantidad

Estas en el tema de Generar option select a partir de otro select de cantidad en el foro de Frameworks JS en Foros del Web. Hola, estoy tratando de generar unos option select a partir de la selección en un select de cantidades per no funciona. Está en esta página ...
  #1 (permalink)  
Antiguo 22/10/2012, 11:54
Avatar de kimmy  
Fecha de Ingreso: julio-2008
Mensajes: 841
Antigüedad: 15 años, 9 meses
Puntos: 15
Exclamación Generar option select a partir de otro select de cantidad

Hola, estoy tratando de generar unos option select a partir de la selección en un select de cantidades per no funciona. Está en esta página mi formulario: http://vamonosdevacaciones.com.ve/cotizacion.php

Este es mi código:

Código HTML:
Ver original
  1. <label for="input-ocho" class="float"><strong>Nº Habitaciones:</strong></label>
  2.             <label>
  3.             <select name="habitaciones" id="habitaciones" onchange="createTexts(this)">
  4.               <option value="0">Seleccionar...</option>
  5.               <option value="1">1</option>
  6.               <option value="2">2</option>
  7.               <option value="3">3</option>
  8.               <option value="4">4</option>
  9.               <option value="5">5</option>
  10.               <option value="6">6</option>
  11.               <option value="7">7</option>
  12.               <option value="8">8</option>
  13.               <option value="9">9</option>
  14.               <option value="10">10</option>
  15.               <option value="11">11</option>
  16.               <option value="12">12</option>
  17.             </select>
  18.             <div class="cajas"></div>
  19.             </label>

y este el javascript:

Código Javascript:
Ver original
  1. function createTexts(sel) {
  2.     var num = sel.value;
  3.     if( !num ) num = sel.options[sel.selectedIndex].value;
  4.     if( !num ) return;
  5.  
  6. * * var html="<select name=\"caja_de_texto[]\" />";
  7.     num = parseInt( num );
  8.     var dest = document.getElementById("cajas");
  9.     for( i = 0; i < num; i++ ) {
  10.          dest.innerHTML += html;
  11.     }
  12. }

Por qué no funciona???

Gracias.
__________________
Caminando con el corazón partío
  #2 (permalink)  
Antiguo 22/10/2012, 12:09
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 15 años
Puntos: 1485
Respuesta: Generar option select a partir de otro select de cantidad

buenas,
corrige la forma en como estás obteniendo la referencia del elemento. el elemento no tiene id, por el contrario tiene un class. luego en tu script intentas obtenerlo por id y no por clase.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #3 (permalink)  
Antiguo 22/10/2012, 12:12
Avatar de marlanga  
Fecha de Ingreso: enero-2011
Ubicación: Murcia
Mensajes: 1.024
Antigüedad: 13 años, 3 meses
Puntos: 206
Respuesta: Generar option select a partir de otro select de cantidad

A bote pronto, porque no hay ningún elemento que se llame "cajas". Aunque sí uno que tiene una clase que se llama cajas.

Mierda, es la segunda vez que te me cuelas y respondes mientras yo estoy escribiendo una respuesta, zerokilled. Este pueblo es demasiado pequeño para los dos.

  #4 (permalink)  
Antiguo 22/10/2012, 12:45
Avatar de kimmy  
Fecha de Ingreso: julio-2008
Mensajes: 841
Antigüedad: 15 años, 9 meses
Puntos: 15
Respuesta: Generar option select a partir de otro select de cantidad

jajajaja, que tonta tanto revisar y no vi lo obvio. Gracias Zerokilled. También gracias marlanga.
__________________
Caminando con el corazón partío
  #5 (permalink)  
Antiguo 22/10/2012, 12:56
Avatar de kimmy  
Fecha de Ingreso: julio-2008
Mensajes: 841
Antigüedad: 15 años, 9 meses
Puntos: 15
Respuesta: Generar option select a partir de otro select de cantidad

Tengo un error. Al seleccionar la primera vez me coloca los select correctos pero luego si selecciono otro numero, me los suma y por ejemplo si primero coloqué 2 y luego coloco 3 me pone 5.

Cómo evito esto???
__________________
Caminando con el corazón partío
  #6 (permalink)  
Antiguo 22/10/2012, 13:03
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 15 años
Puntos: 1485
Respuesta: Generar option select a partir de otro select de cantidad

debes de vaciar primero el contenido del elemento antes de escribirlo. es decir, antes del bucle, asignale un string vacio a la propiedad innerHTML.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #7 (permalink)  
Antiguo 22/10/2012, 13:14
Avatar de kimmy  
Fecha de Ingreso: julio-2008
Mensajes: 841
Antigüedad: 15 años, 9 meses
Puntos: 15
Respuesta: Generar option select a partir de otro select de cantidad

Gracias, con eso se solucionó. Ahora yo trato de mostrar en esos select generados una información que viene de otro select y php. Asi:

Código Javascript:
Ver original
  1. $(document).ready(function(){
  2.                 $("#select1").change(function(event){
  3.                     var id_hab = $("#select1").find(':selected').val();
  4.                     $("#select3").load('genera-select.php?id_hab='+id_hab);
  5.                 });
  6.             });

y este es el archivo genera-select.php:

Código PHP:
Ver original
  1. $consulta2 = "SELECT * from detalle_habitaciones WHERE id_posada = ".$_GET['id_hab'];  
  2.     $result = mysql_query($consulta2);
  3.     while ($fila2 = mysql_fetch_array($result)) {
  4.         echo '<option value="'.$fila2['id_habitacion_detalle'].'">'.$fila2['tipo_habitacion_c'].'</option>';
  5.         //$tipo_habitacion_c = $fila['tipo_habitacion_c'];
  6.         //echo "<option value='".$tipo_habitacion_c."'>".$tipo_habitacion_c."</option>";
  7.  
  8.     };

Esto me funcionaba pero cuando colocaba un select directo y ahora que los genero no me lo hace...
__________________
Caminando con el corazón partío
  #8 (permalink)  
Antiguo 22/10/2012, 13:26
Avatar de kimmy  
Fecha de Ingreso: julio-2008
Mensajes: 841
Antigüedad: 15 años, 9 meses
Puntos: 15
Respuesta: Generar option select a partir de otro select de cantidad

logré que me mostrara la informacion en el primer select poniendo esta linea asi:

Código Javascript:
Ver original
  1. * * var html="<select name=\"select3\" id=\"select3\"/>";

pero en los otros no lo hace
__________________
Caminando con el corazón partío
  #9 (permalink)  
Antiguo 22/10/2012, 13:54
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 15 años
Puntos: 1485
Respuesta: Generar option select a partir de otro select de cantidad

: bueno, en ese caso estás usando jquery. ahí no te puedo ayudar. lo muevo al foro de framework js.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #10 (permalink)  
Antiguo 22/10/2012, 15:17
Avatar de kimmy  
Fecha de Ingreso: julio-2008
Mensajes: 841
Antigüedad: 15 años, 9 meses
Puntos: 15
Respuesta: Generar option select a partir de otro select de cantidad

Entonces mejor muevanme a php!!!
__________________
Caminando con el corazón partío
  #11 (permalink)  
Antiguo 22/10/2012, 17:15
Avatar de Nemutagk
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: México
Mensajes: 2.633
Antigüedad: 20 años, 1 mes
Puntos: 406
Respuesta: Generar option select a partir de otro select de cantidad

Eh revisado la página que dejas en el primer post y eh leido el tema entero, pero, no entiendo del todo cual es tu problema, define bien que es lo que quieres hacer, que es lo que no funciona y que es lo que obtienes con tu código actual...
__________________
Listo?, tendría que tener 60 puntos menos de IQ para considerarme listo!!!
-- Sheldon Cooper
http://twitter.com/nemutagk
PD: No contestaré temas vía mensaje personal =)
  #12 (permalink)  
Antiguo 22/10/2012, 18:37
Avatar de kimmy  
Fecha de Ingreso: julio-2008
Mensajes: 841
Antigüedad: 15 años, 9 meses
Puntos: 15
Respuesta: Generar option select a partir de otro select de cantidad

1) tengo un select que tiene las cantidades a seleccionar (1,2,3,4....)
2) Al seleccionar se generan los select segun la cantidad
3) Esos select deben llenarse con una consulta que es igual para todos (da el mismo resultado para cada uno). Esa consulta es la que hago en genera-select.php:

Código PHP:
Ver original
  1. $consulta2 = "SELECT * from detalle_habitaciones WHERE id_posada = ".$_GET['id_hab']; *
  2. * * $result = mysql_query($consulta2);
  3. * * while ($fila2 = mysql_fetch_array($result)) {
  4. * * * * echo '<option value="'.$fila2['id_habitacion_detalle'].'">'.$fila2['tipo_habitacion_c'].'</option>';
  5. * * * * //$tipo_habitacion_c = $fila['tipo_habitacion_c'];
  6. * * * * //echo "<option value='".$tipo_habitacion_c."'>".$tipo_habitacion_c."</option>";
  7. *
  8. * * };

en este momento solo me llena uno de los select
__________________
Caminando con el corazón partío
  #13 (permalink)  
Antiguo 22/10/2012, 18:53
Avatar de Nemutagk
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: México
Mensajes: 2.633
Antigüedad: 20 años, 1 mes
Puntos: 406
Respuesta: Generar option select a partir de otro select de cantidad

Suponiendo que el código de la página que has publicado es el "correcto" (el que estas trabajando y el que te da problemas) es sencillo el porque solo carga un select, veamos tu código....

Código Javascript:
Ver original
  1. <script language="JavaScript" type="text/JavaScript">
  2.             $(document).ready(function(){
  3.                 $("#select1").change(function(event){
  4.                     var id = $("#select1").find(':selected').val();
  5.                     $("#select2").load('genera-select.php?id='+id);
  6.                 });
  7.             });
  8. </script>
  9.  
  10. <script language="JavaScript" type="text/JavaScript">
  11.             $(document).ready(function(){
  12.                 $("#select1").change(function(event){
  13.                     var id_hab = $("#select1").find(':selected').val();
  14.                     $("#select3").load('genera-select.php?id_hab='+id_hab);
  15.                 });
  16.             });
  17. </script>

El primer código si funciona (el del #select2), porque EXISTE un select con el ID "select2" para rellenar, en cambio, en todo el código de la página no hay ningún select ni ningún otro elemento con dicho ID (select3), por lo tanto jQuery no tiene nada para trabajar los datos enviados desde PHP, ahora, mas adelante tienes una función que genera el select dinamicamente, pero este es unicamente invocado cuando cambia el option seleccionado del select "habitaciones" como puedes ver, es un relajo, en todo caso, primero debes verificar si existe un elemento con el ID "select3" antes de enviar la petición a PHP, o de otro modo, invocar la función "createTexts" antes de enviar dicha petición...

Por ultimo, sin ofender pero, tienes un relajo de Javascripts, tienes $(document).ready al por mayor, lo cual no es nada recomendable, alenta el navegador, todo lo que deba definirse al cargar la página es mejor definirla en un solo evento onload que en varios, y por ultimo, evita estar cargando archivos JS dentro de body, para eso existe el elemento head donde se cargan las dependencias (CSS,JS,etc)
__________________
Listo?, tendría que tener 60 puntos menos de IQ para considerarme listo!!!
-- Sheldon Cooper
http://twitter.com/nemutagk
PD: No contestaré temas vía mensaje personal =)

Última edición por Nemutagk; 22/10/2012 a las 18:58
  #14 (permalink)  
Antiguo 22/10/2012, 19:06
Avatar de kimmy  
Fecha de Ingreso: julio-2008
Mensajes: 841
Antigüedad: 15 años, 9 meses
Puntos: 15
Respuesta: Generar option select a partir de otro select de cantidad

Hola, nemutagk, si tienes razón con lo del relajo pero es que no se muy bien javascript. Respecto a lo de colocar los archivos js en el body, yo lei por alli que era mejor cargarlos al final y no en el head (antes los colocaba en el head). Aclarame que es mejor....

El select3 lo tengo aqui:

Código Javascript:
Ver original
  1. function createTexts(sel) {
  2.     var num = sel.value;
  3.     if( !num ) num = sel.options[sel.selectedIndex].value;
  4.     if( !num ) return;
  5. * * var html="<select name=\"select3\" id=\"select3\"/>";
  6.     num = parseInt( num );
  7.     document.getElementById("cajas").innerHTML="";
  8.     var dest = document.getElementById("cajas");
  9.     for( i = 0; i < num; i++ ) {
  10.          dest.innerHTML += html;
  11.     }
  12. }

Gracias por ayudarme :)
__________________
Caminando con el corazón partío
  #15 (permalink)  
Antiguo 22/10/2012, 19:18
Avatar de Nemutagk
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: México
Mensajes: 2.633
Antigüedad: 20 años, 1 mes
Puntos: 406
Respuesta: Generar option select a partir de otro select de cantidad

Con el tema de cargar los JS en el head o al final de body es por cuestiones de tiempo de carga, al incluirlos en el head estos son descargados primero, por lo cual, el navegador tarda mas de renderizar el "body" de la página, en cambio, al incluirlos al final de body primero se carga el HTML de la página y después los archivos JS, esto tiene sus pros y sus contras, para mi a menos que la página pese mucho y que aparte, mis archivos JS sean muy grandes y peados y que sea primordial que el usuario vea resultados rapido cargo los archivos JS al final, en todo caso por comodidad en lectura es mejor incluirlos eh el head del archivo....

Con el problema, si, vi tu función que genera el select "select3", pero tu problema es que en la "linea de tiempo" entre que se activa el "onchange" del "select1" y cargar los options para el "select3" NUNCA invocas la función "createTexts", de hecho, en el código la unica invocación de la función es en un select llamado "habitaciones", por lo tanto en la "linea de tiempo" primero se debería seleccionar una opción en "habitaciones" para después cargar los options en "select3"
__________________
Listo?, tendría que tener 60 puntos menos de IQ para considerarme listo!!!
-- Sheldon Cooper
http://twitter.com/nemutagk
PD: No contestaré temas vía mensaje personal =)
  #16 (permalink)  
Antiguo 26/10/2012, 06:35
Avatar de kimmy  
Fecha de Ingreso: julio-2008
Mensajes: 841
Antigüedad: 15 años, 9 meses
Puntos: 15
Respuesta: Generar option select a partir de otro select de cantidad

Por favor alguien responda....

Invoco la función "createTexts"en el select llamado "habitaciones" para que a partir de las cantidad seleccionada me genere x numero de option select.

El problema es que no carga en cada select3 el contenido de la consulta a mysql

Cómo puedo hacer que lo cargue???????????????????????????????
__________________
Caminando con el corazón partío
  #17 (permalink)  
Antiguo 26/10/2012, 07:12
Avatar de Nemutagk
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: México
Mensajes: 2.633
Antigüedad: 20 años, 1 mes
Puntos: 406
Respuesta: Generar option select a partir de otro select de cantidad

Ya te conteste, tienes 2 opciones:

a) Invocas a "createText" desde el evento onchage del "select1"
b) Compruebas antes si ya se genero el "select3" antes de mandar a llamar a los options

No hay mas, el problema es ese, y ya te eh dado las opciones para que lo soluciones

Para que se entienda mas facil, yo haría lo siguiente...
Código Javascript:
Ver original
  1. $('#select1').change(function() {
  2.             var idHab = $(this).val();
  3.  
  4.             if ($('#select3').length != 0) {
  5.                 $('#select3').load('genera-select.php?id_hab=' + idHab);
  6.             }else {
  7.                 //Aquí tienes dos opciones, o indicas que falta elegir las habitaciones...
  8.                 alert('Debes elegir primero el numero de habitaciones!');
  9.  
  10.                 //o directamente generas el select...
  11.                 createText();
  12.             }
  13.         });
__________________
Listo?, tendría que tener 60 puntos menos de IQ para considerarme listo!!!
-- Sheldon Cooper
http://twitter.com/nemutagk
PD: No contestaré temas vía mensaje personal =)

Última edición por Nemutagk; 26/10/2012 a las 07:25
  #18 (permalink)  
Antiguo 26/10/2012, 08:09
Avatar de kimmy  
Fecha de Ingreso: julio-2008
Mensajes: 841
Antigüedad: 15 años, 9 meses
Puntos: 15
Respuesta: Generar option select a partir de otro select de cantidad

De verdad que agradezco tu ayuda pero creo que el problema que tengo es para llenar los select porque todo el proceso se realiza bien y me genera los select pero llena solo el primero de ellos.

Será el php con el que los lleno porque no recorre todos los option select del select3???. Está así:

Código PHP:
Ver original
  1. $consulta2 = "SELECT * from detalle_habitaciones WHERE id_posada = ".$_GET['id_hab'];
  2.     $result = mysql_query($consulta2);
  3.  
  4.    while ($fila2 = mysql_fetch_assoc($result)) {
  5.  
  6.         echo '<option value="'.$fila2['id_habitacion_detalle'].'">'.$fila2['tipo_habitacion_c'].'</option>';
  7.     }
__________________
Caminando con el corazón partío
  #19 (permalink)  
Antiguo 26/10/2012, 14:30
Avatar de Nemutagk
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: México
Mensajes: 2.633
Antigüedad: 20 años, 1 mes
Puntos: 406
Respuesta: Generar option select a partir de otro select de cantidad

Supuse que ya habías probado el archivo PHP fuera de ajax (cargarlo directamente en el navegador y a ver visto el código fuente), en fin, siempre que uses mysql debes depurar las consultas agregando al final un mysql_error()...
Código PHP:
Ver original
  1. $result = mysql_query($sql, $conexion) or die(mysql_error());

Si no arroja error entonces debes ver que es lo que retorna tu sentencia SQL probando en phpMyAdmin....

Por ultimo, mysql_* ya esta obsoleto y no debe usarse mas. ahora debes usar mysqli o mejor aun, PDO...
__________________
Listo?, tendría que tener 60 puntos menos de IQ para considerarme listo!!!
-- Sheldon Cooper
http://twitter.com/nemutagk
PD: No contestaré temas vía mensaje personal =)

Etiquetas: cantidad, formulario, funcion, html, input, option, php, select
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:49.