Selección en cascada

Perdón por adelantado a todos por esta pregunta, ya que sé que las casillas de selección en cascada han sido ejecutadas hasta la muerte, pero parece que no encuentro ninguna ayuda. Intenté varias cosas, pero parece que todo falla y no entiendo por qué.

Aquí está el jquery que tengo actualmente:

function tester() { $("select#type").attr('disabled', 'disabled'); $("select#cat").change(function(){ var vid = $("select#cat option:selected").attr('value'); var request = $.ajax({ url: "show_type.php", type: "POST", data: {id : vid} }); request.done(function(msg) { $("#result").html( msg ); }); request.fail(function(jqXHR, textStatus) { alert( "Request failed: " + textStatus ); }); }); } 

No importa la primera sección del código con el select#type y select#cat ya que son para lo que estaba tratando de obtener el código para poblar al principio, sin embargo, el .change es mi desencadenante para la solicitud .ajax . El rest del código estoy intentando simplemente volcar un mensaje de devolución simple en un div#result vacío después de una solicitud de Ajax exitosa.

Ejecuté una prueba y la var vid correctamente.

Aquí está el archivo PHP simple que estoy tratando de llamar con el ajax :

  

Pensé que tal vez el problema era que la id no se había pasado correctamente, así que modifiqué la secuencia de comandos PHP para darme una salida válida, independientemente de si el $_POST estaba configurado o no.

No publicaré el HTML ya que estoy tratando de volcar todo esto en un div mientras lo pruebo. Cuando ejecuto el script, aparece el mensaje de error “Solicitud fallida” con un mensaje de “error”.

Aquí está el otro jquery y PHP que también he intentado, usando .post lugar de .ajax :

 function tester() { $("select#type").attr('disabled', 'disabled'); $("select#cat").change(function(){ $("select#type").html("wait..."); var vid = $("select#cat option:selected").attr('value'); $.post("show_type.php", {id:vid}, function(data){ $("#result").empty().append(data); }, "json"); }); } 

Y el PHP para acompañar este jquery en particular:

 $requ = $_POST['id']; $ret = 'You selected: ' . $requ; echo json_encode($ret); 

Nuevamente, todo falló. También probé el código anterior sin usar la encoding / parámetros json . Todo lo que quiero hacer es un simple (así lo pensaría) en casillas de selección de cascada. El segundo recuadro depende de la selección de los primeros recuadros. Estoy empezando a pensar que todo esto no valdrá la pena y me limito estrictamente a PHP con enlaces para volver a enviar la página con un GET y completar una nueva sección o div con los resultados del primer clic. Cualquier ayuda o sugerencia que pueda tener será muy apreciada, he pasado 2 días enteros tratando de resolver esto. Gracias por adelantado

De acuerdo, lo tengo arreglado. Gracias a Mian_Khurram_ljaz por hacerme observar de forma diferente la estructura jerárquica del archivo. Asumí que como js estaba llamando al archivo php, colocando el archivo php en la misma carpeta que el js, podía llamar al php usando url: show_type.php pero eso en realidad era incorrecto. La estructura se considera desde la página real que invoca a js y php, y por lo tanto la url debería haber sido js/show_type.php ya que tenía el archivo show_type.php en mi carpeta js.

Siempre son los pequeños errores los que te toman días calcular. Para aquellos en el futuro que busquen encontrar un código decente para los cuadros desplegables de selección en cascada, aquí está mi código de funcionamiento y completamente expandido (que también incluye una cascada de tres niveles) jQuery:

 function project() { $("select#model2").attr('disabled', 'disabled'); $("select#brand2").attr('disabled', 'disabled'); $("select#project").change(function(){ $("select#model2").attr('disabled', 'disabled'); // if changed after last element has been selected, will reset last boxes choice to default $("select#model2").html(''); $("select#brand2").html(""); var pid = $("select#project option:selected").attr('value'); $.post("handler/project.php", {id:pid}, function(data){ $("select#brand2").removeAttr("disabled"); $("select#brand2").html(data); }); }); $("select#brand2").change(function(){ $("select#model2").html(""); var bid = $("select#brand2 option:selected").attr('value'); var pid = $("select#project option:selected").attr('value'); $.post("handler/projBrand.php", {proj: pid, bran: bid}, function(data){ $("select#model2").removeAttr("disabled"); $("select#model2").html(data); }); }); } 

Simplemente llame a la función en el $(document).ready de su js.

Observe el comentario, teniendo esta llamada “redundante” para deshabilitar y forzar que el último cuadro seleccione el valor predeterminado es solo en caso de que el usuario haga una selección en los 3 cuadros pero regrese al primer cuadro y cambie la selección.

Aquí está el archivo del manejador de php:

 < ?php include_once('../includes/file.inc'); $request = $opt -> getModelvBrand(); echo $request; ?> 

El otro archivo manejador de jQuery es casi exactamente el mismo, solo invocando un método diferente en el archivo de clase.

Y, por último, el HTML:

 


Gracias de nuevo a Mian por hacerme echar un vistazo diferente a mi archivo (s).

Espero que este código ayude a alguien más en el futuro cercano.