Mysql
 sql >> Base de Dados >  >> RDS >> Mysql

jquery para preencher várias listas suspensas do banco de dados


Seu caminho é bom, mas precisará de muitas chamadas ajax para trazer valores de opção para todos os campos selecionados. Você pode fazer isso em uma única chamada ajax usando JSON. Na página PHP, você pode criar um array que conterá as strings HTML que representam as opções para as quatro caixas de seleção. Então você pode converter este array em uma string JSON usando a função 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);

Em seguida, na página da Web, para o primeiro menu suspenso, você pode escrever uma função 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"]);
  }
});
}

Dessa forma, você pode carregar as opções para todas as outras listas suspensas em uma chamada ajax. Entendo que você também precisa de uma funcionalidade semelhante para outros menus suspensos. Você também pode escrever uma função semelhante para outros menus suspensos. Aqui está uma função generalizada, na qual você passa o número do dropdown e a função retornará as opções para dropdowns direcionados. Por exemplo, se você passar o dropdown número 2, a função retornará as opções dos dropdowns 3, 4 e 5. Se você passar 3, ela retornará as opções dos dropdowns 4 e 5, e assim por diante.
 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"]);
     }
  }
});
}

Na página PHP, você pode escrever o código abaixo para implementar esta funcionalidade:
$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);

Mais informações sobre JSON podem ser encontradas aqui .