插件窝 Js插件 表单 layui无限级联动下拉菜单

layui无限级联动下拉菜单

5072 0 17
  • 1565860346(1)

资源介绍

1.需要php环境支持,静态访问会报错

2.默认选中省市区,在编辑中需要用到。只需设置data-selected='2|5|11',设置每个层级需要选中的id

3.默认可以选择3级,在调用时设置level:2,在选择是只会显示前两级

<form action="" class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">选择区域</label>
        <input type="hidden" name="city" id="J_city_id" value="" />
        <div class="layui-input-block">
            <select class="J_city_select mr10" lay-filter="J_city_select" data-pid="0" data-uri="data.php" data-selected=""></select>
        </div>
    </div>
    <p>默认选中省市区,在编辑中需要用到。只需设置data-selected='2|5|11',设置每个层级需要选中的id</p>
    <div class="layui-form-item">
        <label class="layui-form-label">选择区域</label>
        <input type="hidden" name="city" id="J_city_id_edit" value="" />
        <div class="layui-input-block">
            <select class="J_city_select_edit mr10" lay-filter="J_city_select_edit" data-pid="0" data-uri="data.php" data-selected="2|5|11"></select>
        </div>
    </div>
    <p>默认可以选择3级,在调用时设置level:2,在选择是只会显示前两级</p>
    <div class="layui-form-item">
        <label class="layui-form-label">只显示2级</label>
        <input type="hidden" name="city" id="J_city_id_two" value="" />
        <div class="layui-input-block">
            <select class="J_city_select_two mr10" lay-filter="J_city_select_two" data-pid="0" data-uri="data.php" data-selected=""></select>
        </div>
    </div>
</form>
<script src="layui/layui.js"></script>
<script>
    layui.config({
        base: 'js/'
    });
    layui.use(['form','linkmenu'], function() {
        var $ = layui.jquery;
        $(".J_city_select").select({field: 'J_city_id', id: 'J_city_select'});
        $(".J_city_select_edit").select({field: 'J_city_id_edit', id: 'J_city_select_edit'});
        $(".J_city_select_two").select({field: 'J_city_id_two', id: 'J_city_select_two',level:2});
    });
</script>



相关源码