Ajax drop-down menu cascading operation-JS Tutorial-php.cn

This time I will bring you the ajax drop-down menu cascade operation, what are the precautions for the cascade operation of the ajax drop-down menu, the following is a practical case, let’s take a look .

In development, we often encounter menu cascading operations, such as: selection of countries, cities, towns, etc. When a country is selected, the following menu will list the cities in that country. When a city is selected, the following menu will list the corresponding towns.

There are two ways I understand to solve the cascading operation of this kind of menu:

①Use js to implement, put the cascading data used on the page into js, when After the page is loaded, it is displayed in the corresponding select through js. There are many solutions to this method. The most intuitive one is to put it in a multidimensional array. Everyone has different thinking. Here I won’t explain it in detail.

② Use ajax to load asynchronously and dynamically, and then display it in the corresponding select. This method is very convenient and is recommended for use in development.

Let’s look at a small example in development:

JSP short page:

      <p class="form-group">
        <label class="col-sm-2 control-label">设备类别</label>
        <p class="col-sm-4">
          <select class="basic-single" name="codeCategory" onchange="showCodeSubCate()" id="codeCategory" style="width: 100%">
          
          </select>
        </p>
        <label class="col-sm-2 control-label">设备子类</label>
        <p class="col-sm-4">
          <select class="basic-single" name="codeSubCategory" id="codeSubCate" disabled="disabled" style="width: 100%">
            <option value="">--请选择--</option>
          </select>
        </p>
</p>

Copy after login

This page involves two options, namely: device classification and device subcategory , where the device classification is the first-level menu, the device subcategory is the second-level menu, and the display content of the device subcategory is determined by the device classification.

Let’s look at the ajax code snippet:

function addCodeCategory(){
    $.ajax({
      url: "<%=request.getContextPath()%>/facilitydict/showCodeCategory",
      async: false, //请求是否异步，默认为异步，这也是ajax重要特性
      type: "GET",  //请求方式
      success: function(result) {
        result = $.parseJSON(result);
        var data = result.data;
        var codeCates = data.split(",");
        str ='<option value="6801">--请选择--</option>';
        for(x in codeCates){
          str+='<option value="&#39;+codeCates[x]+&#39;">'+codeCates[x]+'</option>';
        }
        $("#codeCategory").html(str);
        
      }
    });
  }
  
  function showCodeSubCate(){
    $("#codeSubCate").prop("disabled","");//将设备子类的select解除锁定
    var target = $("#codeCategory option:selected").text();
    $.ajax({
      url: "<%=request.getContextPath()%>/facilitydict/showCodeSubCategory",
      data : {codeCategory:target},
      async: false, //请求是否异步，默认为异步，这也是ajax重要特性
      type: "GET",  //请求方式
      success: function(result) {
        result = $.parseJSON(result);
        var data = result.data;
        var codeCates = data.split(",");
        var str="";
        for(x in codeCates){
          str+='<option value="&#39;+codeCates[x]+&#39;">'+codeCates[x]+'</option>';
        }
        $("#codeSubCate").html(str);
      }
    });
  }

Copy after login

It is not difficult to see that when the content in the device classification class selector changes, the showCodeSubCate function is triggered to request background acquisition data, and then add the requested data to the select corresponding to the device subclass. The implementation of the background code is as follows (only the controller method is posted):

@RequestMapping("/showCodeCategory")
  @ResponseBody
  public Result<String> searchCodeCategory() {
    Result<String> rs = new Result<>();
    List<String> codeCategorys = facilityDictService.searchCodeCategory();
    String codeCate = StringUtil.collectionToCommaDelimitedString(codeCategorys);
    rs.setData(codeCate);
    return rs;
  }
  @RequestMapping("/showCodeSubCategory")
  @ResponseBody
  public Result<String> searchCodeSubCategory(HttpServletRequest request) {
    String codeCategory = request.getParameter("codeCategory");
    Result<String> rs = new Result<>();
    List<String> codeSubCategorys = facilityDictService.searchCodeSubCategory(codeCategory);
    String codeCate = StringUtil.collectionToCommaDelimitedString(codeSubCategorys);
    rs.setData(codeCate);
    return rs;
  }

Copy after login

These two methods respectively correspond to the two ajax requests above. What is worth introducing is the data returned by the background. The return value type is Result

ajax and background Tool class for interactive data transmission

 public class Result<T> implements Serializable {
  private static final long serialVersionUID = 3637122497350396679L;
  private boolean success;
  private T data;
  private String msg;
  public Result() {
  }
  public Result(boolean success) {
    this.success = success;
  }
  public boolean isSuccess() {
    return success;
  }
  public void setSuccess(boolean success) {
    this.success = success;
  }
  public T getData() {
    return data;
  }
  public void setData(T data) {
    this.data = data;
  }
  public String getMsg() {
    return msg;
  }
  public void setMsg(String msg) {
    this.msg = msg;
  }
  public Result(boolean success, String msg) {
    super();
    this.success = success;
    this.msg = msg;
  }
  public Result(boolean success, T data) {
    super();
    this.success = success;
    this.data = data;
  }
}</p>
<p style="text-align: left;"> This class provides great convenience for front-end and back-end interactions: </p>
<p style="text-align: left;">The following is the ajax interaction of the front-end and back-end: </p>
<p style="text-align: left;"> Front-end ajax code: </p>
<pre class="brush:php;toolbar:false">$.ajax({
      url: "<%=request.getContextPath()%>/supp/deleteSupp",
      data : {supplierId:supplierId},
      async: false, //请求是否异步，默认为异步，这也是ajax重要特性
      type: "GET",  //请求方式
      success: function(data) {
        var rs = eval('('+data+')');
        flag = rs.success;
        if(flag){
          alert("删除成功!");
        }
      }
    });

Copy after login

The following is the background java code:

  @RequestMapping("/deleteSupp")
  @ResponseBody
  public Result<String> deleteSupplier(HttpServletRequest request){
    Result<String> rs = new Result<>();
    String supplierId = request.getParameter("supplierId");
    supplierService.deleteSupplierById(supplierId);
    rs.setSuccess(true);
    return rs;
  }

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!