I'm in a project, and I want to create a dynamic selects, working with PHP and Mysql. I have no problem showing the first selects' options. I can obtain the value of the selected option. But I can't show the options in the second <select> taking into account the value I've got.

I think my problem is with the variable asignatura. When I run my application, the alert I've put in the 54 line (in adminFunctions.js) tells me "undefined". So I think my mainFunctions.inc.php doesn't recive the variable, or maybe the problem is in the PHP code...

The code I have is the following:

The page .html

2. <tr>
3.     <td>
4.       Asignatura: <select name="selAsignatura" id="selAsignatura"></select>
5.       Objetivo Etapa: <select name="selObjEtapa" id="selObjEtapa"></select>
6.     </td>
7.   </tr>

The adminFuntions.js, where I have two funtions: "selectAsignatura" (this one works fine) and "selectObjEtapa"

3. jQuery.fn.selectAsignatura = function() {
4.     $.ajax({
5.               cache: false,
6.               type: "POST",
7.               dataType: "json",
8.               url:"includes/appResponses.inc.php",
9.               data:"accion=selectorAsignatura&id=" + Math.random(),
10.               success: function(response){
11.                         if(response.respuesta == true){
12.                                  //alert('"Se muestran los valores de la BD');  
13.                             //alert(response.contenido); 
14.                             refDiv = document.getElementById('selAsignatura');
15.                             refDiv.innerHTML = response.contenido;   
16. 
    
17.                          }else{
18.                                  alert("Ha habido algún error");
19.                         }
20.                },
21.               error:function(){
22.                   alert('ERROR AL MOSTRAR LAS ASIGNATURAS, INTENTE MAS TARDE');
23.                   $('#ajaxLoaderRecuperar').addClass('hide');
24.               }              
25.           }); 
26. };
27. 
    
28. jQuery.fn.selectObjEtapa = function() {
29.   $('#selAsignatura').change(function(){
30.   var asignatura = $('#selAsignatura').serialize();
31.   //alert(asignatura);
32.   
33.   // Función que envíe la var asignatura (id_asignatura) para buscar los objetivos que tengan esa id_asign por medio de una llmada AJAX...
34.     $.ajax({
35.        cache: false,
36.        type: "POST", //Establecemos como se van a enviar los datos puede POST o GET
37.        url: "includes/appResponses.inc.php", //SCRIPT que procesara los datos, establecer ruta relativa o absoluta
38.        dataType: "json",
39.        data: asignatura + "&accion=selectorObjEtapa&id=" + Math.random(), //Variable que transferira los datos
40.        contentType: "application/x-www-form-urlencoded; charset=UTF-8", //Tipo de contenido que se enviara
41.        success: function(response){
42.                         if(response.respuesta == true){
43.                                  //alert('"Se muestran los valores de la BD');  
44.                             //alert(response.contenido); 
45.                             refDiv = document.getElementById('selObjEtapa');
46.                             refDiv.innerHTML = response.contenido;   
47. 
    
48.                          }else{
49.                                  alert("Ha habido algún error");
50.                         }
51.                },
52.        error:function(response){
53.                   // alert('ERROR AL MOSTRAR LOS OBJETIVOS DE ETAPA, INTENTE MAS TARDE');
54.                   alert(response.mensaje);           
55.                   $('#ajaxLoaderRecuperar').addClass('hide');
56.               }
57.      });
58. });
59. };

I run these functions, and both of them go to the file appResponses.inc.php, where we can see that:

2. case 'selectorAsignatura':
3.                 $appResponse['respuesta'] = true;
4.                 $appResponse['mensaje'] = "Mostrando las Asignaturas";
5.                 $appResponse['contenido'] = seleccionaAsignatura($mysqli);
6. break;
7. 
   
8. case 'selectorObjEtapa':
9. if(seleccionaObjEtapa($_POST,$mysqli)){
10. $appResponse['respuesta'] = true;
11. $appResponse['mensaje'] = "Asignatura añadida correctamente";
12. }else{
13. $appResponse['mensaje'] = "No se ha podido guardar la asignatura";
14. }
15. break;

And, to finish, this one above runs in mainFunctions.inc.php (below) these functions:

2. function seleccionaAsignatura($linkDB){
3. 
   
4. $salida = '';
5. 
   
6. $consulta = $linkDB -> query("SELECT id_asignatura,asignatura
7.  FROM asignatura ORDER BY asignatura ASC");
8. 
   
9. if($consulta -> num_rows != 0){
11. // convertimos el objeto
12. while($listadoOK = $consulta -> fetch_assoc())
13. {
14. $salida .= '
15. <option value="'.$listadoOK['id_asignatura'].'">'.$listadoOK['asignatura'].'</option>
16. ';
17. }
18. }
19. else{
20. $salida = '
21. <option id="sinDatos" value="">NO HAY REGISTROS EN LA BASE DE DATOS</option>
22. ';
23. }
24. 
    
25. return $salida;
26. }
27. 
    
28. // Función para extraer el listado de asignaturas
29. function seleccionaObjEtapa($data,$dbLink){
30. 
    
31. $salida = '';
32. $asignatura = $_POST['asignatura'];
33. $consulta = $linkDB -> query("SELECT id_obj_etapa,obj_etapa
34.  FROM obj_etapa WHERE id_asignatura='$asignatura' ORDER BY id_obj_etapa ASC");
35. 
    
36. if($consulta -> num_rows != 0){
38. // convertimos el objeto
39. while($listadoOK = $consulta -> fetch_assoc())
40. {
41. $salida .= '
42. <option value="'.$listadoOK['id_obj_etapa'].'">'.$listadoOK['obj_etapa'].'</option>
43. ';
44. }
45. }
46. else{
47. $salida = '
48. <option id="sinDatos" value="">NO HAY REGISTROS EN LA BASE DE DATOS</option>
49. ';
50. }
51. 
    
52. return $salida;
53. }