Using Jquery.chained.remote to realize multilevel cascade

Multilevel cascade has always been the front-end of a more annoying feature, this time with jquery plug-in, chained.remote implementation of multi-level cascade.

Application scenario: There are at least two drop-down boxes with a variable number of drop-down boxes.

Application steps:

1. The introduction of JS file, of course, this plugin needs to download itself.

<!---<type= "Text/javascript"  src = "./static/js/jquery.chained.remote.min.js" ></ Script >

2. Two drop-down boxes

                           
<!--first drop -down box--
<Divclass= "Col-lg-2 col-md-3 col-sm-4 col-xs-6"style= "padding-bottom:2px">                                <Divclass= "Input-group input-group-sm">                                    <spanclass= "Input-group-addon">Materials/Products</span> <Selectclass= "Form-control"name= "CategoryType"ID= "CategoryType"onchange= "Setparm (this.name, This.value)">                                        <optionvalue="">All</option>                                        <optionvalue= "0"><c:ifTest= ' ${pm.categorytype==1} '>Selected</c:if>Material</option>                                        <optionvalue= "1"><c:ifTest= ' ${pm.categorytype==2} '>Selected</c:if>Product</option>                                    </Select>                                </Div>                            </Div>
<!--a second drop-down box--
                            <Divclass= "Col-lg-2 col-md-3 col-sm-4 col-xs-6"style= "padding-bottom:2px">                                <Divclass= "Input-group input-group-sm">                                    <spanclass= "Input-group-addon">Parent category</span> <SELECTclass= "Form-control"name= "Parentcategoryid"ID= "Parentcategoryid"onchange= "Setparm (this.name, This.value)">                                        <OPTIONvalue="">Please select</OPTION>                                    </SELECT>                                </Div>                            </Div>

What I want to do is to select the material or product of the first drop-down box, which causes the second drop-down box to display a different content. Note The ID of the first drop-down box is CategoryType, and the ID of the second drop-down box is Parentcategoryid.

3. Write the following JS code

$ (function () {        //two-level linkage        $ ("#parentCategoryId"). remotechained ("#categoryType", " Parentcategorylistbycategorytype ");    });

Parentcategoryid and categorytype correspond to the IDs of the second and first drop-down boxes, respectively,Parentcategorylistbycategorytype Is the URL of the AJAX fetch data.
4. The next step is to write the Parentcategorylistbycategorytype code.

@ResponseBody    @RequestMapping ("Parentcategorylistbycategorytype")    public String parentcategorylistbycategorytype (int  categorytype) {        = categoryservice                . Getrootcategorylistbycategorytype (categorytype);         return jsonobject.tostring ();    }

 PublicJsonobject Getrootcategorylistbycategorytype (intcategorytype) {        Try{List<tcategory>rootcategorylist=basedao.findtlistbyparam ("Tcategorymapper.selectrootcategorybycategorytype", CategoryType); Jsonobject Jsonobject=NewJsonobject ();  for(Tcategory category:rootcategorylist) {jsonobject.put (Category.getcategoryid (). toString (), Category.get            CategoryName ()); }            returnJsonobject; } Catch(Exception e) {//TODO auto-generated Catch blockE.printstacktrace (); }        return NULL; }

    <SelectID= "Selectrootcategorybycategorytype"Resultmap= "Baseresultmap"ParameterType= "Java.lang.Integer">Select<includerefID= "Base_column_list" />From t_category where is_del=0 and Is_root=1<ifTest= "Categoryid!=0">and Category_type=#{categoryid,jdbctype=integer}</if>ORDER BY Sort_num</Select>

You can see that the data we have obtained is in JSON format. This completes the level two cascade effect, multi-level cascade as long as on this basis in the same way to do it.

PS: The application framework is SSM.

Using Jquery.chained.remote to realize multilevel cascade