jquery Ajax implementiert Select, um das Parsen von Dateninstanzen dynamisch hinzuzufügen

Dieser Artikel stellt hauptsächlich die relevanten Informationen von jquery Ajax zum dynamischen Hinzufügen von Daten über Select vor. Ich hoffe, dass er allen helfen kann.

jquery Ajax implementiert Select, um Daten dynamisch hinzuzufügen

1. Hintergrund

Vor kurzem bin ich bei der Arbeit auf ein Problem gestoßen über wählen. Unter normalen Umständen sind die Daten im Auswahl-Dropdown-Feld festgelegt oder der Listenwert wird direkt in JSP gelesen und angezeigt. Dieses Mal müssen wir jedoch Select mit anderen Optionsfeldern verknüpfen, das heißt, wir müssen Optionsdaten dynamisch hinzufügen. Nachdem ich viele Informationen konsultiert hatte, habe ich es endlich verstanden. Lassen Sie mich im Folgenden erläutern, wie Sie jQuery und Ajax verwenden, um Select zum dynamischen Hinzufügen von Daten zu implementieren.

2. Der Code in diesem Artikel implementiert die Funktion der Verknüpfung des Fahrzeugmodells mit der Fahrzeugmarke. Zuallererst ist es die Definition der Fahrzeugmarke in JSP. Das ist sehr einfach. Wie folgt:

<li class="form-row">
<span style="white-space:pre"> </span>
<span class="form-lbl"><i class="tip form-tip">*</i>车系</span>
 <select class="form-select" name="modelId">
 </select>
</li>

Dann ist der JS-Code:

function getModelList(){ 
 var brandId = $("select[name=brandId]").val(); 
 $("select[name=modelId]").empty(); //清空
 $.ajax({url:'/getModelList.do',
 type:"post",
 data:{
 brandId : brandId
 },
 cache: false,
 error:function(){
 }, 
 success:function(data){
 var modelList = data.modelList;
 if(modelList && modelList.length != 0){
 for(var i=0; i<modelList.length; i++){
  var option="<option value=\""+modelList[i].modelId+"\"";
  if(_LastModelId && _LastModelId==modelList[i].modelId){
  option += " selected=\"selected\" "; //默认选中
  _LastModelId=null;
  }
  option += ">"+modelList[i].modelName+"</option>"; //动态添加数据
  $("select[name=modelId]").append(option);
 }
 }
 }
 });
}

Schließlich ist der Backend-Code:

@RequestMapping("/getModelList")
 @ResponseBody
 public Map getModelList(Integer brandId) {
 List<SrmsModel> modelList = null;
 try{
 modelList = carInfoManager.getSrmsModelListByBrandId(brandId);
 }catch(Exception e){
 LOGGER.error("获取年租车辆型号异常:{}", e.getMessage());
 }
 Map<String, Object> returnMap = Maps.newHashMap();
 returnMap.put("modelList", modelList);
 return returnMap;
 }

Verwandte Empfehlungen:

So fügen Sie Stile dynamisch zu den von Ajax zurückgegebenen HTML-Tags hinzu

Detaillierte Erläuterung der Verwendung von jQuery zum dynamischen Hinzufügen kleiner Anzeigen

Beispiel für die gemeinsame Nutzung von jQuery mit dynamischem Hinzufügen von .active, um Navigationseffektcode zu erzielen

Das obige ist der detaillierte Inhalt vonjquery Ajax implementiert Select, um das Parsen von Dateninstanzen dynamisch hinzuzufügen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!