jquery Ajax implémente Select pour ajouter dynamiquement l'analyse des instances de données

Cet article présente principalement les informations pertinentes de jquery Ajax pour ajouter dynamiquement des données via Select. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

jquery Ajax implémente Select pour ajouter dynamiquement des données. Le contenu spécifique est le suivant

1 Contexte

Récemment au travail, j'ai rencontré un problème. à propos de sélectionner. Dans des circonstances normales, les données dans la liste déroulante de sélection sont fixes ou la valeur de la liste est lue directement dans jsp et affichée. Cependant, cette fois, nous devons lier la sélection à d'autres boîtes d'options, c'est-à-dire que nous devons ajouter dynamiquement des données d'option. Après avoir consulté de nombreuses informations, j'ai finalement compris. Permettez-moi de partager ci-dessous comment utiliser jQuery et Ajax pour implémenter la sélection afin d'ajouter dynamiquement des données.

2. Le code de cet article implémente la fonction de liaison du modèle de véhicule à la marque du véhicule. Tout d'abord, c'est la définition de la marque du véhicule en jsp. C'est très simple. Comme suit :

<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>

Ensuite, le code JS :

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

Enfin, le code backend :

@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;
 }

Recommandations associées :

Comment ajouter dynamiquement des styles aux balises HTML renvoyées par Ajax

Explication détaillée de l'utilisation de jQuery pour ajouter dynamiquement de petits annonces

Exemple de partage de jQuery en ajoutant dynamiquement .active pour obtenir un code d'effet de navigation

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!