关于select联动

原码取于Timo框架

     <div class="layui-form-item">
            <label class="layui-form-label required">父级菜单</label>
            <div class="layui-input-inline">
                <input class="layui-input select-tree" th:attr="data-url=@{/system/menu/list}, data-value=${pMenu?.id}" type="text" name="pid"  placeholder="请输入父级菜单" th:value="${pMenu?.title}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-inline">
                <select class="select-sort" name="sort"
                        th:attr="data-url=@{/system/menu/sortList}, data-id=${menu?.id}, data-sort=${menu?.sort}" lay-verify="sort"></select>
            </div>
            <div class="layui-input-info">(之后)</div>
        </div>

js代码

layui.use(['form'], function () {
        window.form = layui.form;
        // 初始化排序下拉选项
        var pid = $(".select-tree").data('value');
        if (pid !== undefined){
            sortRender({id: pid});
        }
    });

    // 初始化下拉树
    $.fn.selectTree({
        rootTree: '顶级菜单',
        // 选中后事件
        onSelected: sortRender
    });

    // 更新渲染排序下拉选项
    function sortRender(treeNode) {
        var pid = treeNode.id;
        var sort = $(".select-sort");
        var id = sort.data('id') ? sort.data('id') : 0;
        var url = sort.data('url') + "/" + pid + "/" + id;
        $.get(url, function (result) {
            var options = '';
            var sortNum = Object.keys(result).length;
            if(pid === $(".select-tree").data('value') && sort.data('sort')){
                sortNum = sort.data('sort') - 1;
            }
            result[0] = "首位";
            for(var key in result){
                var selected = sortNum == key ? "selected=''" : "";
                options += "<option value='"+ key +"' " + selected + ">"+ result[key] +"</option>";
            }
            sort.html(options);
            form.render('select');
        });
    }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值