layui ajax 实现下拉框联动

html文件

 <div class="layui-form">
                <div class="layui-input-inline">
                    <select  lay-filter="platform" >
                        <option value="0">全部</option>
                        <#if marketList?exists && marketList?size gt 0 >
                            <#list marketList as it>
                                <option value="${(it.id?c)!0}">${it.alias}</option>
                            </#list>
                        </#if>
                    </select>
                </div>
                <div class="layui-input-inline">
                    <select id="first"  lay-filter="categoryId" >
                        <option value="0">全部</option>
                        <#if marketList1?exists && marketList1?size gt 0 >
                            <#list marketList as it>
                                <option value="${it.id}">${it.alias}</option>
                            </#list>
                        </#if>
                    </select>
                </div>
            </div>

js文件

<script>
    layui.use('form', function () {
        var form = layui.form;

        //监听select选择事件
        form.on('select(platform)', function(data){
            var categoryId=data.value;
            $.ajax({
                type : "GET",
                url : "/user/serproduct/listChildCategoryById",
                data : {categoryId:categoryId},
                success : function(ev)
                {
                    $("#first").empty();
                    $("#first").prepend("<option value='0'>请选择</option>");//添加第一个option值
                    for (var i = 0; i < ev.marketList2.length; i++) {
                        alert(ev.marketList2[i].alias);
                        //如果在select中传递其他参数,可以在option 的value属性中添加参数
                        $("#first").append("<option value='"+ev.marketList2[i].id+"'>"+ev.marketList2[i].alias+"</option>");

                    }
                    //这句话必加,不加不显示新增的option
                    form.render();
                },error:function(){
                    alert("获取数据失败","error");
                }
            });
        });
    });
</script>

获取第二个下拉框数据的后台文件

@RequestMapping(value = "listChildCategoryById",method = RequestMethod.GET)
    @ResponseBody
    public Map listChildCategoryById(@RequestParam(value = "categoryId", required = false,defaultValue = "0") Long categoryId){
        Map map=new HashMap();
        //Market是一个实体类
        List<Market> marketList=marketService.listChildCategoryById(6,categoryId);
        map.put("marketList2", marketList);
        return map;
    }

猜你喜欢

转载自blog.csdn.net/qq_37121548/article/details/81187973