jQuery om meerdere vervolgkeuzelijsten uit de database te vullen

Jouw manier is prima, maar er zijn veel ajax-aanroepen nodig om optiewaarden voor alle geselecteerde velden te brengen. U kunt dit bereiken in een enkele ajax-aanroep met behulp van JSON. Op de PHP-pagina kunt u een array maken die de HTML-tekenreeksen bevat die de opties voor de vier selectievakken vertegenwoordigen. Vervolgens kunt u deze array converteren naar een JSON-string met behulp van de json_encode() functie:

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

Dan kun je op de webpagina, voor de eerste vervolgkeuzelijst, een jQuery-functie als volgt schrijven:

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

Op deze manier kunt u de opties voor alle andere dropdowns in één ajax-oproep laden. Ik begrijp dat je een vergelijkbare functionaliteit ook nodig hebt voor andere vervolgkeuzelijsten. U kunt een vergelijkbare functie ook voor andere vervolgkeuzemenu's schrijven. Hier is een algemene functie, waarin u het vervolgkeuzenummer doorgeeft en de functie de opties voor gerichte vervolgkeuzelijsten retourneert. Als u bijvoorbeeld dropdown nummer 2 doorgeeft, retourneert de functie opties voor dropdowns 3, 4 en 5. Als u 3 passeert, retourneert het opties voor dropdowns 4 en 5, enzovoort.

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

Op de PHP-pagina kun je de onderstaande code schrijven om deze functionaliteit te implementeren:

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

Meer informatie over JSON vindt u hier .