Campo select anidado con javascript y jquery

[shawn1986]

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:

<select name='categoria' class='select' id='status'>
        <option value='0'selected>=Selecciona una categoría=</option>
        <option class='selbloq' disabled='disabled'>-Abarrotes-</option>
        <option value='abarrotes cat1'>abarrotes cat1</option>
        <option value='abarrotes cat2'>abarrotes cat2</option>
        <option class='selbloq' disabled='disabled'>-Herramientas-</option>
        <option value='herramientas cat1'>herramientas cat1</option>
        <option value='herramientas cat2'>herramientas cat2</option>
        <option class='selbloq' disabled='disabled'>-autos/transportes-</option>
        <option value='auto1'>autos</option>
        <option value='auto2'>motos</option>
        <option value='auto3'>cuatriciclos</option>
 </select>
 

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

Código HTML:

<div id='formularios'></div>
 

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

Código Javascript:

$(document).ready(function(){
   $("#status").change(function () {
           $("#status option:selected").each(function () {
            seleccion=$(this).val();
            $.post("campos.php", { seleccion: seleccion }, function(data){
            $("#formularios").html(data);
            });            
        });
   })
});
 

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

Código PHP:

<?php
$options="";
if ($_POST["seleccion"]==0) {
    $options= '
    ';
}
if ($_POST["seleccion"]=="abarrotes cat1") {
    $options= '
<table class="forms" width="100%" border="0">
    <tr>
      <td class="forms2" width="20%">Abarrotes cat1:</td>
      <td width="80%"><select name="tipo_abarrotes" class="select">
      <option value="0">=Selecciona tipo de abarrotes=</option>
      <option value="perecederos">perecederos</option>
      <option value="no perecederos">no perecederos</option>
      <option value="granos">granos</option>
      <option value="otros">otros</option>
    </select></td>
    </tr>
    <tr>
      <td class="forms2">código</td>
      <td><input type="text" class="textbox2" name="cod_tp"/></td>
      </table>
    ';    
}
if ($_POST["seleccion"]=="abarrotes cat2") {
    $options= '
<table class="forms" width="100%" border="0">
    <tr>
      <td class="forms2" width="20%">Abarrotes cat2:</td>
      <td width="80%"><select name="tipo_abarrotes2" class="select">
      <option value="0">=Selecciona tipo de abarrotes2=</option>
      <option value="enlatados">enlatados</option>
      <option value="cajas">cajas</option>
      <option value="bolsas">bolsas</option>
      <option value="granel">granel</option>
    </select></td>
    </tr>
    <tr>
      <td class="forms2">código:</td>
      <td><input type="text" class="textbox2" name="cod_tp2"/></td>
      </table>
    ';    
}
if ($_POST["seleccion"]=="herramientas cat1") {
    $options= '
<table class="forms" width="100%" border="0">
    <tr>
      <td class="forms2" width="20%">herramientas cat1:</td>
      <td width="80%"><select name="tipo_herramientas" class="select">
      <option value="0">=Selecciona tipo de herramientas=</option>
      <option value="manuales">manuales</option>
      <option value="electricas">electricas</option>
      <option value="mecanicas">mecanicas</option>
      <option value="combustible">combustible</option>
    </select></td>
    </tr>
      </table>
    ';    
}
if ($_POST["seleccion"]=="herramientas cat2") {
    $options= '
<table class="forms" width="100%" border="0">
    <tr>
      <td class="forms2" width="20%">herramientas cat2:</td>
      <td width="80%"><select name="clase_herramientas" class="select">
      <option value="0">=Selecciona clase de herramientas=</option>
      <option value="corte">corte</option>
      <option value="perforacion">perforacion</option>
      <option value="medicion">medicion</option>
    </select></td>
    </tr>
      </table>
    ';    
}
if ($_POST["seleccion"]=="autos") {
    $options= '
<table class="forms" width="100%" border="0">
    <tr>
      <td class="forms2" width="20%">Marca:</td>
      <td width="80%">
      <select name="marca" class="select id="lst-marcas">
      <option value="0">=Selecciona una marca=</option>
      <option value="marca1">marca1</option>
      <option value="marca2">marca2</option>
      <option value="marca3">marca3</option>
      <option value="marca4">marca4</option>
      <option value="marca5">marca5</option>
      <option value="marca6">marca6</option>
      <option value="marca7">marca7</option>
      <option value="marca8">marca8</option>
      </select></td>
    </tr>
    <tr>
 
//Esta es la parte que no funciona************************************
      <td class="forms2">Modelo:</td>
      <td><select name="modelo" class="select" id="modelo">
      <option value="0"></option>
    </select></td>
      </table>
    ';    
}
echo $options;    
?>
 

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:

<!--funcion autos-->
$(document).ready(function(){
   $("#lst-marcas").change(function () {
           $("#lst-marcas option:selected").each(function () {
            seleccion=$(this).val();
            $.post("modelos.php", { seleccion: seleccion }, function(data){
            $("#modelo").html(data);
            });            
        });
   })
});
 

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:

<?php
$options2="";
if ($_POST["seleccion"]==0) {
    $options= '
    <option value="1"></option>
    ';
}
if ($_POST["seleccion"]=="marca1") {
    $options2= '
    <option value="0">=Selecciona un modelo=</option>
    <option value="modelo1">modelo1</option>
    <option value="modelo2">modelo2</option>
    <option value="modelo3">modelo3</option>
    <option value="modelo4">modelo4</option>
    <option value="modelo5">modelo5</option>
    <option value="modelo6">modelo6</option>
    <option value="modelo7">modelo7</option>
    <option value="modelo8">modelo8</option>
    ';    
}
if ($_POST["seleccion"]=="marca2") {
    $options2= '
    <option value="0">=Selecciona un modelo=</option>
    <option value="modelo1">modelo1</option>
    <option value="modelo2">modelo2</option>
    <option value="modelo3">modelo3</option>
    <option value="modelo4">modelo4</option>
    <option value="modelo5">modelo5</option>
    ';    
}
if ($_POST["seleccion"]=="marca3") {
    $options2= '
    <option value="0">=Selecciona un modelo=</option>
    <option value="modelo1">modelo1</option>
    <option value="modelo2">modelo2</option>
    <option value="modelo3">modelo4</option>
    <option value="modelo5">modelo5</option>
    <option value="modelo6">modelo</option>
    ';    
}
if ($_POST["seleccion"]=="marca4") {
    $options2= '
    <option value="0">=Selecciona un modelo=</option>
    <option value="modelo1">modelo1</option>
    <option value="modelo2">modelo2</option>
    <option value="modelo3">modelo3</option>
    <option value="modelo4">modelo4</option>
    <option value="modelo5">modelo5</option>
    <option value="modelo6">modelo6</option>
    <option value="modelo7">modelo7</option>
    <option value="modelo8">modelo8</option>
    <option value="modelo9">modelo9</option>
    <option value="modelo10">modelo10</option>
    <option value="modelo11">modelo11</option>
    ';
}
echo $options2;    
?>
 

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.

[peperafa]

Que tal hermano,

No llames una función de una variable que imprimes para evitar problemas mejor has otro div con el otro menú y ocultarlo o muestralo en la misma funcion de selección, algo así:

$(document).ready(function(){
$("#status").change(function () {
$("#status option:selected").each(function () {
seleccion=$(this).val();
if (seleccion=="auto1") {
$("#lst-marcas").css("display", "block");
}
else{
$("#lst-marcas").css("display", "none");
}
$.post("autocompletar.php", { seleccion: seleccion }, function(data){
$("#formularios").html(data);
});
});
})
});

Select marca lst-marcas

<select style="display:none" name="marca" class="select" id="lst-marcas">
<option value="0">=Selecciona una marca=</option>
<option value="marca1">marca1</option>
<option value="marca2">marca2</option>
<option value="marca3">marca3</option>
<option value="marca4">marca4</option>
<option value="marca5">marca5</option>
<option value="marca6">marca6</option>
<option value="marca7">marca7</option>
<option value="marca8">marca8</option>
</select>



Y a te tomará bien la otra función, nada más arregla el código en php y listo.

Exitos!!

[shawn1986]

Iniciado por peperafa

Que tal hermano,

No llames una función de una variable que imprimes para evitar problemas mejor has otro div con el otro menú y ocultarlo o muestralo en la misma funcion de selección, algo así:

$(document).ready(function(){
$("#status").change(function () {
$("#status option:selected").each(function () {
seleccion=$(this).val();
if (seleccion=="auto1") {
$("#lst-marcas").css("display", "block");
}
else{
$("#lst-marcas").css("display", "none");
}
$.post("autocompletar.php", { seleccion: seleccion }, function(data){
$("#formularios").html(data);
});
});
})
});

Select marca lst-marcas

<select style="display:none" name="marca" class="select" id="lst-marcas">
<option value="0">=Selecciona una marca=</option>
<option value="marca1">marca1</option>
<option value="marca2">marca2</option>
<option value="marca3">marca3</option>
<option value="marca4">marca4</option>
<option value="marca5">marca5</option>
<option value="marca6">marca6</option>
<option value="marca7">marca7</option>
<option value="marca8">marca8</option>
</select>



Y a te tomará bien la otra función, nada más arregla el código en php y listo.

Exitos!!

Disculpas por responder tantos días después, de antemano te agradezco la atención que le brindaste a mi tema y el tiempo que te tomaste en brindarme una posible solución.

Te explico un poco más, no se si me estoy dando a entender, y más aun no se si entiendo bien lo que me propones, lo siento, no soy muy bueno con javascript.

El tema es como lo expliqué con código -ahora intentaré explicarlo con palabras simples-, tengo un campo select con varias categorías, y con el código que mostre antes imprimo un formulario -con campos distintos- para cada categoría por medio de jquery y javascript.

Ahora bien, lo que intento es que en el formulario principal que se imprime a partir de un campo select y través de una llamada jquery y javascript, y que a su vez incluye otro campo select dentro de él, pueda llamar a una segunda función idéntica a la anterior, para que una vez seleccionando el segundo campo select, me arroje la información relacionada en un tecer campo select (espero se entienda)


Más o menos algo así:

1.-El primer campo select incluye las categorías, si seleccionamos una u otra nos mostrará un formulario distinto.
2.- Si en el primer selec escogimos la opción autos/transportes.
3.-Entonces el formulario nos mostrará un segundo y tecer campo select, en el segundo campo select están definidas (estáticamente) las marcas de autos, motos y otros vehículos.
4.-Entonces al seleccionar alguna de estas marcas el tercer select (dinámico) debería de mostrar los modelos de la marca seleccionada.

La primera función toma perfectamente los formularios dinámicos, el problema (creo es) estar llamando la segunda función del select dinámico de modelos de acuerdo a la marca seleccionada. No entiendo muy bien si el problema está en imprimir -con echo de php- una función que va a ser llamada con javascript y jquery.

Y de ser un problema por la causa anterior, cómo pudiera solventar esta situciación para que cuando seleccione una marca se cargue dinamicamente los modelos de esta dentro de la misma función que imprime los formularios dinamicos.

De antemano gracias por la orientación, se aceptan comentarios y sugerencias.
Para cualquier duda acerca del codigo, se encuentra al principio del tema.

[infoturnosya]

proba con esto
$("#lst-marcas").on("change",function () {

[peperafa]

Si te entiendo perfectamente, mira ya tienes 2 soluciones la que te propuse de ocultar y mostrar las etiquetas (solo las que estén anidadas) con JQuery para lograr el efecto dinámico que quieres, lógicamente con cierta selección hace cierta instrucción por eso se utiliza un if con los valores que quieras que aparezca la casilla de selección.

por ejemplo asi:
if ((seleccion=="auto1") || (seleccion=="auto2") || (seleccion=="auto3"))
// `mi código para mostrar el otro combobox
}

Es lo que te explique la vez pasada. En caso de que tengas muchos valores en los input toma mejor el id del select (claro tendrás que acomodar el código de tal manera) o puedes usar s.match y colocar un identificador con un nombre en común en los input que contiene el select

Te dejo un ejemplo de su uso:

var s = "hello world!";
if (s.match(/hello.*/)) {
// do something
}

También la puedes llamar el evento onchange con el identificador de tu select como lo comenta infoturnosya y ya no necesitas tomar el valor de lo que seleccionas, que se me hace lo más viable si no quieres lograr un efecto para cada selección.

Básicamente lo que te propongo es lo mismo solo que en lugar de php utilizas etiquetas fijas html y el jquery creando el mismo aspecto dinámico, a mí me gusta más así.

La otra solución sería llamar a las funciones en el código php de esta manera en tu caso sería así:

Código PHP:

  $prueba="1234";
if (($_POST["seleccion"]=="autos") || ($_POST["seleccion"]=="1234")) {
    $options= '
<table class="forms" width="100%" border="0">
    <tr>
      <td class="forms2" width="20%">Marca:</td>
      <td width="80%">
      <select name="marca" class="select id="lst-marcas" onChange=\'javascript:mifuncion("'.$prueba.'")\'">
      <option value="0">=Selecciona una marca=</option>
      <option value="marca1">marca1</option>
      <option value="marca2">marca2</option>
      <option value="marca3">marca3</option>
      <option value="marca4">marca4</option>
      <option value="marca5">marca5</option>
      <option value="marca6">marca6</option>
      <option value="marca7">marca7</option>
      <option value="marca8">marca8</option>
      </select></td>
    </tr>
    <tr>
'; 
}
if ($_POST["seleccion"]=="1234") {
    $options= $options.' 
      <td class="forms2">Modelo:</td>
      <td><select name="modelo" class="select" id="modelo">
      <option value="0"></option>
    </select></td>
      </table>
    ';    
} 
   

Yo mande un parámetro de prueba con el valor de 1234 tu se lo puedes cambiar o quitar no es necesario ya que lo puedes poner directo en la función. Ese valor lo utilizo para identificar cuando se cambia la selección de la marca y así poner el modelo. La desventaja es que como es una variable que se usa para todo y la que contiene tu select se perderá el valor seleccionado pero mostrara el otro select, esto se puede arreglar con php o javascript, pero me desviaría mucho del tema.

Y mifuncion llevaría esto:

function mifuncion(a){
alert(a);
$.post("javascript.php", { seleccion: a }, function(data){
$("#formularios").html(data);
});
}

A ver si proponen más soluciones, mira si no me entiendes lo de mostrar y ocultar te dejo el link con un blog para que lo cheques: http://www.desarrolloweb.com/articulos/mostrar-ocultar-elementos-jquery.html.
Saludos!!