Os remito una duda que tengo sobre selects anidados. El problema es que no consigo que me imprima el segundo select cuando el primero si que me lo coje con la base de datos perfectamente.
Yo hago una llamada desde el HTML a info e info2 y el primer me saca el select por pantalla pero cuando intento usar el evento change para que me genere el segundo, no me hace nada.
Código:
Muchas gracias por vuestra ayuda.// Esta funcion recoge el json data de titulos y lo imprime en pantalla function restultsTitulo(data) { $("div.info").html('').show(); $("div.info").append("<div class=\"titulo\">"); $("div.info").append("Titulo: "); $("div.info").append("<select id=\"tit\">"); $("#tit").append("<option value='0'> Elige un titulo"); $.each(data,function(index,value) { $("#tit").append('<option value="'+data[index].id+'">' + data[index].nombre + '</option>'); }); $("div.info").append("</select>"); $("div.info").append("</div>"); $("div.info").append("<br />"); } // Esta funcion recoge el json data de subtitulos y lo imprime en pantalla function restultsSubtitulo(data) { $("div.info2").html('').show(); $("div.info2").append("<div class=\"subtitulo\">"); $("div.info2").append("Subtitulo: "); $("div.info2").append("<select id=\"sub\">"); $("#sub").append("<option value='0'> Elige un subtitulo"); $.each(data,function(index,value) { $("#sub").append('<option value="'+data[index].id+'">' + data[index].nombre + '</option>'); }); $("div.info2").append("</select>"); $("div.info2").append("</div>"); } //INICIO $(document).ready(function(){ $.ajax({ data: "", type: "GET", dataType: "json", url: "recogeTitulo.php", success: function(data){ restultsTitulo(data); } }); }); $("#tit").change(function () { $("#tit option:selected").each(function () { var value = $('#tit option:selected').val(); $.ajax({ data: "value", type: "GET", dataType: "json", url: "recogeSubtitulo.php", success: function(data){ restultsSubtitulo(data); } }); }); })
Un saludo!