Mysql
 sql >> Datenbank >  >> RDS >> Mysql

jquery, um mehrere Dropdown-Listen aus der Datenbank zu füllen

Ihr Weg ist in Ordnung, aber es werden viele Ajax-Aufrufe benötigt, um Optionswerte für alle ausgewählten Felder zu bringen. Sie können dies in einem einzigen Ajax-Aufruf mit JSON erreichen. Auf der PHP-Seite können Sie ein Array erstellen, das die HTML-Strings enthält, die die Optionen für die vier Auswahlfelder darstellen. Dann können Sie dieses Array mit der Funktion json_encode() in einen JSON-String umwandeln:

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

Dann können Sie auf der Webseite für das erste Dropdown-Menü eine jQuery-Funktion wie diese schreiben:

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

Auf diese Weise können Sie die Optionen für alle anderen Dropdowns in einem Ajax-Aufruf laden. Ich verstehe, dass Sie eine ähnliche Funktionalität auch für andere Dropdowns benötigen. Sie können ähnliche Funktionen auch für andere Dropdowns schreiben. Hier ist eine verallgemeinerte Funktion, bei der Sie die Dropdown-Nummer übergeben und die Funktion die Optionen für gezielte Dropdowns zurückgibt. Wenn Sie beispielsweise Dropdown-Nummer 2 übergeben, gibt die Funktion Optionen für die Dropdown-Listen 3, 4 und 5 zurück. Wenn Sie 3 übergeben, gibt sie Optionen für die Dropdown-Listen 4 und 5 zurück, und so weiter.

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

Auf der PHP-Seite können Sie den folgenden Code schreiben, um diese Funktionalität zu implementieren:

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

Weitere Informationen zu JSON finden Sie hier .