Tema: Campo select anidado con javascript y jquery
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 10/12/2015, 17:56
shawn1986
 
Fecha de Ingreso: julio-2009
Mensajes: 63
Antigüedad: 15 años, 4 meses
Puntos: 0
Campo select anidado con javascript y jquery
Antes que nada saludos a todos los administradores, usuarios y visitantes del foro.

Quisiera solicitar su apoyo para lograr hacer funcionar un combo select anidado, explico un poco:

En principio tengo un formulario con campos comunes, y utilizo un campo select para imprimir los campos que me faltan y que no se ocupan en todas las categorías (campos que no son comunes entre cada categoría) pero que se imprimen según la selección del select.

Este es el select de las categorías:

Código HTML: 
Ver original
  1. <select name='categoria' class='select' id='status'>
  2.         <option value='0'selected>=Selecciona una categoría=</option>
  3.         <option class='selbloq' disabled='disabled'>-Abarrotes-</option>
  4.         <option value='abarrotes cat1'>abarrotes cat1</option>
  5.         <option value='abarrotes cat2'>abarrotes cat2</option>
  6.         <option class='selbloq' disabled='disabled'>-Herramientas-</option>
  7.         <option value='herramientas cat1'>herramientas cat1</option>
  8.         <option value='herramientas cat2'>herramientas cat2</option>
  9.         <option class='selbloq' disabled='disabled'>-autos/transportes-</option>
  10.         <option value='auto1'>autos</option>
  11.         <option value='auto2'>motos</option>
  12.         <option value='auto3'>cuatriciclos</option>
  13.  </select>


El resultado de la selección se imprime en el siguiente div

Código HTML: 
Ver original
  1. <div id='formularios'></div>


Ahora el script que me procesa el campo select es el siguiente:

Código Javascript: 
Ver original
  1. $(document).ready(function(){
  2.    $("#status").change(function () {
  3.            $("#status option:selected").each(function () {
  4.             seleccion=$(this).val();
  5.             $.post("campos.php", { seleccion: seleccion }, function(data){
  6.             $("#formularios").html(data);
  7.             });            
  8.         });
  9.    })
  10. });


Los valores del campos.php (código php que busca la coincidencia e imprime los formularios) son los siguientes:

Código PHP: 
Ver original
  1. <?php
  2. $options="";
  3. if ($_POST["seleccion"]==0) {
  4.     $options= '
  5.     ';
  6. }
  7. if ($_POST["seleccion"]=="abarrotes cat1") {
  8.     $options= '
  9. <table class="forms" width="100%" border="0">
  10.     <tr>
  11.       <td class="forms2" width="20%">Abarrotes cat1:</td>
  12.       <td width="80%"><select name="tipo_abarrotes" class="select">
  13.       <option value="0">=Selecciona tipo de abarrotes=</option>
  14.       <option value="perecederos">perecederos</option>
  15.       <option value="no perecederos">no perecederos</option>
  16.       <option value="granos">granos</option>
  17.       <option value="otros">otros</option>
  18.     </select></td>
  19.     </tr>
  20.     <tr>
  21.       <td class="forms2">código</td>
  22.       <td><input type="text" class="textbox2" name="cod_tp"/></td>
  23.       </table>
  24.     ';    
  25. }
  26. if ($_POST["seleccion"]=="abarrotes cat2") {
  27.     $options= '
  28. <table class="forms" width="100%" border="0">
  29.     <tr>
  30.       <td class="forms2" width="20%">Abarrotes cat2:</td>
  31.       <td width="80%"><select name="tipo_abarrotes2" class="select">
  32.       <option value="0">=Selecciona tipo de abarrotes2=</option>
  33.       <option value="enlatados">enlatados</option>
  34.       <option value="cajas">cajas</option>
  35.       <option value="bolsas">bolsas</option>
  36.       <option value="granel">granel</option>
  37.     </select></td>
  38.     </tr>
  39.     <tr>
  40.       <td class="forms2">código:</td>
  41.       <td><input type="text" class="textbox2" name="cod_tp2"/></td>
  42.       </table>
  43.     ';    
  44. }
  45. if ($_POST["seleccion"]=="herramientas cat1") {
  46.     $options= '
  47. <table class="forms" width="100%" border="0">
  48.     <tr>
  49.       <td class="forms2" width="20%">herramientas cat1:</td>
  50.       <td width="80%"><select name="tipo_herramientas" class="select">
  51.       <option value="0">=Selecciona tipo de herramientas=</option>
  52.       <option value="manuales">manuales</option>
  53.       <option value="electricas">electricas</option>
  54.       <option value="mecanicas">mecanicas</option>
  55.       <option value="combustible">combustible</option>
  56.     </select></td>
  57.     </tr>
  58.       </table>
  59.     ';    
  60. }
  61. if ($_POST["seleccion"]=="herramientas cat2") {
  62.     $options= '
  63. <table class="forms" width="100%" border="0">
  64.     <tr>
  65.       <td class="forms2" width="20%">herramientas cat2:</td>
  66.       <td width="80%"><select name="clase_herramientas" class="select">
  67.       <option value="0">=Selecciona clase de herramientas=</option>
  68.       <option value="corte">corte</option>
  69.       <option value="perforacion">perforacion</option>
  70.       <option value="medicion">medicion</option>
  71.     </select></td>
  72.     </tr>
  73.       </table>
  74.     ';    
  75. }
  76. if ($_POST["seleccion"]=="autos") {
  77.     $options= '
  78. <table class="forms" width="100%" border="0">
  79.     <tr>
  80.       <td class="forms2" width="20%">Marca:</td>
  81.       <td width="80%">
  82.       <select name="marca" class="select id="lst-marcas">
  83.       <option value="0">=Selecciona una marca=</option>
  84.       <option value="marca1">marca1</option>
  85.       <option value="marca2">marca2</option>
  86.       <option value="marca3">marca3</option>
  87.       <option value="marca4">marca4</option>
  88.       <option value="marca5">marca5</option>
  89.       <option value="marca6">marca6</option>
  90.       <option value="marca7">marca7</option>
  91.       <option value="marca8">marca8</option>
  92.       </select></td>
  93.     </tr>
  94.     <tr>
  95.  
  96. //Esta es la parte que no funciona************************************
  97.       <td class="forms2">Modelo:</td>
  98.       <td><select name="modelo" class="select" id="modelo">
  99.       <option value="0"></option>
  100.     </select></td>
  101.       </table>
  102.     ';    
  103. }
  104. echo $options;    
  105. ?>

La sección comentada es la que no funciona pues de acuerdo a la selección del auto debería de cargarse dinámicamente también una lista con los modelos, los cuales al igual que las sección anterior están a cargo del código siguiente:

Código Javascript: 
Ver original
  1. <!--funcion autos-->
  2. $(document).ready(function(){
  3.    $("#lst-marcas").change(function () {
  4.            $("#lst-marcas option:selected").each(function () {
  5.             seleccion=$(this).val();
  6.             $.post("modelos.php", { seleccion: seleccion }, function(data){
  7.             $("#modelo").html(data);
  8.             });            
  9.         });
  10.    })
  11. });

Y al igual que el código anterior, la petición javascript es resuelta por "modelos.php" con el siguiente código.

Código PHP: 
Ver original
  1. <?php
  2. $options2="";
  3. if ($_POST["seleccion"]==0) {
  4.     $options= '
  5.     <option value="1"></option>
  6.     ';
  7. }
  8. if ($_POST["seleccion"]=="marca1") {
  9.     $options2= '
  10.     <option value="0">=Selecciona un modelo=</option>
  11.     <option value="modelo1">modelo1</option>
  12.     <option value="modelo2">modelo2</option>
  13.     <option value="modelo3">modelo3</option>
  14.     <option value="modelo4">modelo4</option>
  15.     <option value="modelo5">modelo5</option>
  16.     <option value="modelo6">modelo6</option>
  17.     <option value="modelo7">modelo7</option>
  18.     <option value="modelo8">modelo8</option>
  19.     ';    
  20. }
  21. if ($_POST["seleccion"]=="marca2") {
  22.     $options2= '
  23.     <option value="0">=Selecciona un modelo=</option>
  24.     <option value="modelo1">modelo1</option>
  25.     <option value="modelo2">modelo2</option>
  26.     <option value="modelo3">modelo3</option>
  27.     <option value="modelo4">modelo4</option>
  28.     <option value="modelo5">modelo5</option>
  29.     ';    
  30. }
  31. if ($_POST["seleccion"]=="marca3") {
  32.     $options2= '
  33.     <option value="0">=Selecciona un modelo=</option>
  34.     <option value="modelo1">modelo1</option>
  35.     <option value="modelo2">modelo2</option>
  36.     <option value="modelo3">modelo4</option>
  37.     <option value="modelo5">modelo5</option>
  38.     <option value="modelo6">modelo</option>
  39.     ';    
  40. }
  41. if ($_POST["seleccion"]=="marca4") {
  42.     $options2= '
  43.     <option value="0">=Selecciona un modelo=</option>
  44.     <option value="modelo1">modelo1</option>
  45.     <option value="modelo2">modelo2</option>
  46.     <option value="modelo3">modelo3</option>
  47.     <option value="modelo4">modelo4</option>
  48.     <option value="modelo5">modelo5</option>
  49.     <option value="modelo6">modelo6</option>
  50.     <option value="modelo7">modelo7</option>
  51.     <option value="modelo8">modelo8</option>
  52.     <option value="modelo9">modelo9</option>
  53.     <option value="modelo10">modelo10</option>
  54.     <option value="modelo11">modelo11</option>
  55.     ';
  56. }
  57. echo $options2;    
  58. ?>

El problema es que si me imprime la primera ejecución del javascript, es decir, me imprime correctamente los formularios, pero cuando me imprime el formulario de autos me imprime el select con los nombres de las marcas, pero la función de los modelos ya no hace nada ya no muestra nada en el select y ese es el problema que ahí debería de mostrar los modelos de los autos. No se si estoy llamando mal la función, o simplemente, no se puede invocar una función que esta dentro de otra función que fue previamente invocada.


Desde ya les agradezco sus comentarios, observaciones y sugerencias.

Obviamente el código no está completo, lo armé a modo de que sea comprensible. Si faltan datos o no fui muy claro acepto comentarios de todo tipo que me ayuden a resolver este problema.
Última edición por shawn1986; 10/12/2015 a las 20:03