Cascading operations (AJAX) _ajax related to the dropdown menu

In the development of the menu will often encounter cascading operations, such as: Country, City, township and other choices. When a country is elected, the next menu will list cities in the country, and the next menu will list the corresponding towns.

The way to solve this cascade of menus is that I understand two things:

① use JS to achieve, the page used by the cascaded data into JS, when the page is loaded, through JS display to the corresponding select, this method has many kinds of solutions, the most intuitive one is put into multi-dimensional array, everyone's thinking is different, here is not detailed explanation.

② use Ajax to dynamically load and then display to the corresponding select, which is convenient and recommended for development.

Let's look at a small example of development:

JSP Short page:

      <div class= "Form-group" >
        <label class= "col-sm-2 Control-label" > Equipment category </label>
        <div class= "Col-sm-4" > <select class= "basic-single" name= "Codecategory" onchange= "Showcodesubcate"
          () "Id=" Codecategory "style=" width:100% ">
          
          </select>
        </div>
        <label class=" col-sm-2 Control-label "> Equipment Subclass </label>
        <div class=" col-sm-4 ">
          <select class=" Basic-single "Name=" Codesubcategory "id=" codesubcate "disabled=" Disabled "style=" width:100% ">
            <option value=" ">--Please select- </option>
          </select>
        </div>
</div>

This page involves two select, respectively: Device classification and device subclasses, where the device classification as a first-order menu, the device subclass is a level two menu, device subclasses of the display content determined by the device classification.

Here's a look at the Ajax code snippet:

function Addcodecategory () {$.ajax ({url: "<%=request.getcontextpath ()%>/facilitydict/showcodecategory",  Async:false,//request is asynchronous, default is asynchronous, this is Ajax important feature type: "Get",//Request mode Success:function (result) {result
        = $.parsejson (result);
        var data = Result.data;
        var codecates = Data.split (",");
        str = ' <option value= ' 6801 ' >--please choose--</option> ';
        for (x in codecates) {str+= ' <option value= ' +codecates[x]+ ' "> ' +codecates[x]+ ' </option> ';
        
      $ ("#codeCategory"). html (str);
  }
    }); function Showcodesubcate () {$ ("#codeSubCate"). Prop ("Disabled", "");//Unlock the Select of the device subclass to var target = $ ("#codeC
    Ategory option:selected "). Text (); $.ajax ({url: "<%=request.getcontextpath ()%>/facilitydict/showcodesubcategory", data: {Codecategory:tar
    Get}, Async:false,//request is asynchronous, default is asynchronous, this is Ajax important feature type: "Get",//Request mode Success:function (Result) {    result = $.parsejson (result);
        var data = Result.data;
        var codecates = Data.split (",");
        var str= "";
        for (x in codecates) {str+= ' <option value= ' +codecates[x]+ ' "> ' +codecates[x]+ ' </option> ';
      $ ("#codeSubCate"). html (str);
  }
    });
 }

It is not difficult to see that when the contents of the device classification selector are changed, the Showcodesubcate function is triggered to request the background to fetch the data, and then the requested data is added to the select of the device subclass. The implementation of the background code is as follows (only the Controller method is posted):

 @RequestMapping ("/showcodecategory") @ResponseBody public result<string> Searc
    Hcodecategory () {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 (HTTPSERVL
    Etrequest 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; }

The two methods correspond to the two AJAX requests above, which is worth introducing the background returned data, the return value type is Result<string>, and the return value type is a tool class, the implementation can be viewed in my blog, the link is: http:// Www.cnblogs.com/blog411032/p/5799669.html

A tool class that Ajax interacts with the background to transfer data

 public class Result<t> implements Serializable {

  private static final long Serialversionuid = 36371224973503966 79L;

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

 

This class provides a great convenience for front and back-table interaction:

Here is the Ajax interaction in front of the background:

Foreground Ajax Code:

$.ajax ({
      URL: "<%=request.getcontextpath ()%>/supp/deletesupp",
      data: {Supplierid:supplierid},
      Async:false,//request is asynchronous, default is asynchronous, this is Ajax important feature
      type: "Get",  //Request mode
      success:function (data) {
        var rs = eval (' (' +data+ ');
        flag = rs.success;
        if (flag) {
          alert ("Delete succeeded!");}}
    ); 

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

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.