jquery Ajax implements Select to dynamically add data instance parsing-JS Tutorial-php.cn

jquery Ajax implements Select to dynamically add data instance parsing

小云云

Release： 2018-05-26 15:53:31

Original

2507 people have browsed it

This article mainly introduces the relevant information of jquery Ajax to realize Select dynamically adding data. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

jquery Ajax implements Select to dynamically add data. The specific content is as follows

1. Background

Recently at work, I encountered a problem about select . Under normal circumstances, the data in the select drop-down box is fixed or the list value is read directly in jsp and displayed. However, this time we need to link select with other option boxes, that is, we need to dynamically add option data. After consulting a lot of information, I finally got it. Let’s share how to use jQuery and Ajax to dynamically add data through select.

2. The code in this article implements the function of linking the vehicle model with the vehicle brand. First of all, it is the vehicle brand definition in jsp. This is very simple. As follows:

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

Copy after login

Then, is the JS code:

function getModelList(){ 
 var brandId = $("select[name=brandId]").val(); 
 $("select[name=modelId]").empty(); //清空
 $.ajax({url:&#39;/getModelList.do&#39;,
 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);
 }
 }
 }
 });
}

Copy after login

Finally, is the 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;
 }

Copy after login

Related recommendations:

How to dynamically add styles to HTML tags returned by Ajax

Using jQuery to dynamically add small advertisements

Example sharing jQuery dynamically adds .active to achieve navigation effect code

The above is the detailed content of jquery Ajax implements Select to dynamically add data instance parsing. For more information, please follow other related articles on the PHP Chinese website!