sql >> Base de Datos >  >> RDS >> Mysql

jquery para llenar múltiples listas desplegables de la base de datos

Su camino está bien, pero necesitará muchas llamadas ajax para traer valores de opción para todos los campos seleccionados. Puede lograr esto en una sola llamada ajax usando JSON. En la página de PHP, puede crear una matriz que contendrá las cadenas HTML que representan las opciones para los cuatro cuadros de selección. Luego puede convertir esta matriz en una cadena JSON usando la función json_encode():

$arr=array("second"=>"<option>....</option>.......<option...</option>", //for second dropdown
           "third"=>"<option>....</option>.......<option...</option>", //for third dropdown
           "fourth"=>"<option>....</option>.......<option...</option>", //for fourth dropdown
           "fifth"=>"<option>....</option>.......<option...</option>" //for fifth dropdown
  );
 echo json_encode($arr);

Luego, en la página web, para el primer menú desplegable, puede escribir una función jQuery como esta:

 function loadOptions(){
jQuery.ajax({

  success: function(data){
     jQuery("select#field_2").html(data["second"]);
     jQuery("select#field_3").html(data["third"]);
     jQuery("select#field_4").html(data["fourth"]);
     jQuery("select#field_5").html(data["fifth"]);
  }
});
}

De esta manera, puede cargar las opciones para todos los demás menús desplegables en una llamada ajax. Entiendo que también necesita una funcionalidad similar para otros menús desplegables. También puede escribir una función similar para otros menús desplegables. Aquí hay una función generalizada, en la que pasa el número desplegable y la función devolverá las opciones para los menús desplegables específicos. Por ejemplo, si pasa el menú desplegable número 2, la función devolverá las opciones para los menús desplegables 3, 4 y 5. Si pasa el 3, devolverá las opciones para los menús desplegables 4 y 5, y así sucesivamente.

 function loadOptions(selectNo){
jQuery.ajax({
  data:{"selectNo",selectNo},
  success: function(data){
     switch(selectNo){
     case 1: jQuery("select#field_2").html(data["second"]);
     case 2: jQuery("select#field_3").html(data["third"]);
     case 3: jQuery("select#field_4").html(data["fourth"]);
     case 4: jQuery("select#field_5").html(data["fifth"]);
     }
  }
});
}

En la página de PHP, puede escribir el siguiente código para implementar esta funcionalidad:

$selectNo=$_GET["selectNo"];
$arr=array();
switch(selectNo){
case 1: $arr["second"]="<option>....</option>.......<option...</option>"; //for second dropdown
case 2: $arr["third"]="<option>....</option>.......<option...</option>"; //for third dropdown
case 3: $arr["fourth"]="<option>....</option>.......<option...</option>"; //for fourth dropdown
case 4: $arr["fifth"="<option>....</option>.......<option...</option>"; //for fifth dropdown
}
 echo json_encode($arr);

Se puede encontrar más información sobre JSON aquí .