Mysql
 sql >> Database >  >> RDS >> Mysql

jquery per riempire più elenchi a discesa dal database

La tua strada va bene, ma saranno necessarie molte chiamate ajax per portare i valori delle opzioni per tutti i campi selezionati. Puoi farlo in una singola chiamata ajax usando JSON. Nella pagina PHP, puoi creare un array che conterrà le stringhe HTML che rappresentano le opzioni per le quattro caselle di selezione. Quindi puoi convertire questo array in una stringa JSON usando la funzione 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);

Quindi nella pagina web, per il primo menu a discesa, puoi scrivere una funzione jQuery come questa:

 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"]);
  }
});
}

In questo modo, puoi caricare le opzioni per tutti gli altri menu a discesa in una chiamata ajax. Capisco che hai bisogno di una funzionalità simile anche per altri menu a discesa. Puoi scrivere una funzione simile anche per altri menu a discesa. Ecco una funzione generalizzata, in cui si passa il numero a discesa e la funzione restituirà le opzioni per i menu a discesa mirati. Ad esempio, se si passa il menu a discesa numero 2, la funzione restituirà le opzioni per i menu a discesa 3, 4 e 5. Se si passa 3, verranno restituite le opzioni per i menu a discesa 4 e 5 e così via.

 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"]);
     }
  }
});
}

Nella pagina PHP, puoi scrivere il codice seguente per implementare questa funzionalità:

$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);

Ulteriori informazioni su JSON sono disponibili qui .