利用jquery.chained.remote实现多级级联

2021-07-19 22:08

阅读：440

标签：二级级联 parameter 内容 control stack blog turn form tostring

多级级联一直是前端比较烦人的一个功能，本次用jquery的插件，chained.remote实现多级级联。

应用场景：至少有二个下拉框，下拉框的个数不定。

应用步骤：

1.引入js文件，当然这个插件需要自己去下载。


script type="text/javascript" src="./static/js/jquery.chained.remote.min.js">script>

2.两个下拉框

                           

div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"
                                style="padding-bottom: 2px">
                                div class="input-group input-group-sm">
                                    span class="input-group-addon">材料/产品span> select
                                        class="form-control" name="categoryType" id="categoryType"
                                        onchange="setParm(this.name, this.value)">
                                        option value="">所有option>
                                        option value="0">c:if test=‘${pm.categoryType==1}‘>selectedc:if>材料
                                        option>
                                        option value="1">c:if test=‘${pm.categoryType==2}‘>selectedc:if>产品
                                        option>
                                    select>
                                div>
                            div>


                            div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"
                                style="padding-bottom: 2px">
                                div class="input-group input-group-sm">
                                    span class="input-group-addon">父级类别span> SELECT
                                        class="form-control" name="parentCategoryId" id="parentCategoryId"
                                        onchange="setParm(this.name, this.value)">
                                        OPTION value="">请选择OPTION>
                                    SELECT>
                                div>
                            div>

我想实现的是选择第一个下拉框的材料或者产品的时候，会导致第二个下拉框显示不同的内容。注意第一个下拉框的id是categoryType,第二个下拉框的id是parentCategoryId.

3.写入如下js代码

$(function() {
        //二级联动
        $("#parentCategoryId").remoteChained("#categoryType", "parentCategoryListByCategoryType");

    });

parentCategoryId和categoryType分别对应第二个和第一个下拉框的id，parentCategoryListByCategoryType是ajax获取数据的url。
4.接下来就是编写parentCategoryListByCategoryType的代码。

@ResponseBody
    @RequestMapping("parentCategoryListByCategoryType")
    public String parentCategoryListByCategoryType(int categoryType) {
        JSONObject jsonObject = categoryService
                .getRootCategoryListByCategoryType(categoryType);
        return jsonObject.toString();
    }

public JSONObject getRootCategoryListByCategoryType(int categoryType){
        try {
            ListrootCategoryList=baseDao.findTListByParam("TCategoryMapper.selectRootCategoryByCategoryType", categoryType);
            JSONObject jsonObject=new JSONObject();
            for(TCategory category:rootCategoryList){
                jsonObject.put(category.getCategoryId().toString(), category.getCategoryName());
            }
            return jsonObject;
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        return null;
        
    }

    select id="selectRootCategoryByCategoryType" resultMap="BaseResultMap"
        parameterType="java.lang.Integer">
        select
        include refid="Base_Column_List" />
        from t_category
        where is_del=0 and is_root=1
        if test="categoryId!=0">
            and
            category_type=#{categoryId,jdbcType=INTEGER}
        if>
        order by sort_num
    select>

可以看到我们取得的数据是json格式的。这样便完成了二级级联的效果，多级级联只要在这个基础上按同样的方法做就可以了。

PS：应用的框架是ssm.

利用jquery.chained.remote实现多级级联

标签：二级级联 parameter 内容 control stack blog turn form tostring

原文地址：http://www.cnblogs.com/roy-blog/p/7055057.html

上一篇：.net 4.0 中的特性总结（三）：垃圾回收

下一篇：解决CSS3多列样式column-width布局时内容被截断、错乱

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：利用jquery.chained.remote实现多级级联
文章链接：http://soscw.com/index.php/essay/106398.html

亲，登录后才可以留言！

利用jquery.chained.remote实现多级级联

评论

热门文章

推荐文章

最新文章

置顶文章