Jquery Ajax implements Select to dynamically add data, jqueryajax

Jquery Ajax implements Select to dynamically add data, jqueryajax

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

1. Background

Recently, I encountered a select problem in my work. Generally, the data in the select drop-down box is fixed or the list value is read and displayed directly in jsp. However, this operation requires that select be linked with other option boxes, that is, the option data should be dynamically added. I checked a lot of information and finally got it done. Next we will share with you how to use jQuery and Ajax to implement select Dynamic addition of data.

2. The code in this article implements the vehicle model display function based on the vehicle Brand Association.First, 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> train </span> <select class = "form-select" name = "modelId"> </select> </li>

Then, yesJS Code:

Function getModelList () {var brandId = $ ("select [name = brandId]"). val (); $ ("select [name = modelId]"). empty (); // clear $. 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 \ ""; // The default value is _ LastModelId = null;} option + = ">" + modelList [I]. modelName + "</option>"; // Add data dynamically $ ("select [name = modelId]"). append (option );}}}});}

Finally, yesBackground code:

@ RequestMapping ("/getModelList") @ ResponseBody public Map getModelList (Integer brandId) {List <SrmsModel> modelList = null; try {modelList = carInfoManager. getSrmsModelListByBrandId (brandId);} catch (Exception e) {LOGGER. error ("An error occurred while obtaining the model of a yearly Taxi: {}", e. getMessage ();} Map <String, Object> returnMap = Maps. newHashMap (); returnMap. put ("modelList", modelList); return returnMap ;}

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.