layui多选级联选择器的实现

最新推荐文章于 2024-04-24 15:51:07 发布

专业前端小白

最新推荐文章于 2024-04-24 15:51:07 发布

阅读量5.2k

点赞数

文章标签： layui 级联选择器多选级联选择器无限级联选择器

本文链接：https://blog.csdn.net/qq_41756580/article/details/113976492

版权

在做项目的过程中经常会遇到要使用级联选择的时候，级联选择器如何实现多选呢？
先来看看效果：
在这里插入图片描述源代码如下：

<html lang="en">
  <meta charset="utf-8">
  <title>LayUI RC-Cascader</title>
  <link rel="stylesheet" href="./js/layui-v2.5.6/layui/css/layui.css">
  <style>
    html, body {
      margin: 0;
      padding: 0;
    }

    .rc-cascader {
      width: 282px;
    }

    #app {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }

    .main {
      padding: 16px;
    }
  </style>
  <body>
    <div id="app" class="main">
        <form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">输入框</label>
                <div class="layui-input-block">
                    <input type="text" name="areas" value="1000,1368,1398" lay-filter="areasChange" style="display: none;" />
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
                </div>
            </div>
        </form>
    </div>
  </body>
  <script src="./js/layui-v2.5.6/layui/layui.js"></script>
  <script type="text/javascript">
  layui.config({
    base: './ext/'
  }).extend({
    cascader: 'cascader/cascader'
  }).use(['form', 'jquery', 'cascader'], function () {
    var $ = layui.jquery, cascader = layui.cascader, form = layui.form;
    var areaTree = '[{"id":1000,"province_city":"\u5317\u4eac","fid":"0","children":[{"id":1368,"province_city":"\u5317\u4eac\u5e02","fid":"1000","children":[{"id":1397,"province_city":"\u4e1c\u57ce\u533a","fid":"1368"},{"id":1398,"province_city":"\u897f\u57ce\u533a","fid":"1368"},{"id":1399,"province_city":"\u5d07\u6587\u533a","fid":"1368"},{"id":1400,"province_city":"\u5ba3\u6b66\u533a","fid":"1368"},{"id":1401,"province_city":"\u671d\u9633\u533a","fid":"1368"},{"id":1402,"province_city":"\u6d77\u6dc0\u533a","fid":"1368"},{"id":1403,"province_city":"\u4e30\u53f0\u533a","fid":"1368"},{"id":1404,"province_city":"\u77f3\u666f\u5c71\u533a","fid":"1368"},{"id":1405,"province_city":"\u623f\u5c71\u533a","fid":"1368"},{"id":1406,"province_city":"\u901a\u5dde\u533a","fid":"1368"},{"id":1407,"province_city":"\u987a\u4e49\u533a","fid":"1368"},{"id":1408,"province_city":"\u95e8\u5934\u6c9f\u533a","fid":"1368"},{"id":1409,"province_city":"\u660c\u5e73\u533a","fid":"1368"},{"id":1410,"province_city":"\u5927\u5174\u533a","fid":"1368"},{"id":1411,"province_city":"\u6000\u67d4\u533a","fid":"1368"},{"id":1412,"province_city":"\u5e73\u8c37\u533a","fid":"1368"},{"id":1413,"province_city":"\u5bc6\u4e91\u53bf","fid":"1368"},{"id":1414,"province_city":"\u5ef6\u5e86\u533a","fid":"1368"}]}]},{"id":1001,"province_city":"\u4e0a\u6d77","fid":"0","children":[{"id":1369,"province_city":"\u4e0a\u6d77\u5e02","fid":"1001","children":[{"id":1433,"province_city":"\u9ec4\u6d66\u533a","fid":"1369"},{"id":1434,"province_city":"\u5362\u6e7e\u533a","fid":"1369"},{"id":1435,"province_city":"\u5f90\u6c47\u533a","fid":"1369"},{"id":1436,"province_city":"\u957f\u5b81\u533a","fid":"1369"},{"id":1437,"province_city":"\u9759\u5b89\u533a","fid":"1369"},{"id":1438,"province_city":"\u666e\u9640\u533a","fid":"1369"},{"id":1439,"province_city":"\u95f8\u5317\u533a","fid":"1369"},{"id":1440,"province_city":"\u8679\u53e3\u533a","fid":"1369"},{"id":1441,"province_city":"\u6768\u6d66\u533a","fid":"1369"},{"id":1442,"province_city":"\u5b9d\u5c71\u533a","fid":"1369"},{"id":1443,"province_city":"\u95f5\u884c\u533a","fid":"1369"},{"id":1444,"province_city":"\u5609\u5b9a\u533a","fid":"1369"},{"id":1445,"province_city":"\u677e\u6c5f\u533a","fid":"1369"},{"id":1446,"province_city":"\u91d1\u5c71\u533a","fid":"1369"},{"id":1447,"province_city":"\u9752\u6d66\u533a","fid":"1369"},{"id":1448,"province_city":"\u6d66\u4e1c\u65b0\u533a","fid":"1369"},{"id":1449,"province_city":"\u5357\u6c47\u533a","fid":"1369"},{"id":1450,"province_city":"\u5949\u8d24\u533a","fid":"1369"},{"id":1451,"province_city":"\u5d07\u660e\u53bf","fid":"1369", "children": [{"id":14511,"province_city":"\u5d07\u660e\u53bf","fid":"1451"}]}]}]}]';

    cascader.render({
      elem: $('input[name=areas]')[0],
      multiple: true,
      showAllLevels: true,
      separator: "/", //显示文本的分隔符号（showAllLevels开启时生效） 默认 /
      valueSeparator: ",", //选择值的级联分隔符号 默认 ,
      groupSeparator: "|", //多选时选择值的组分隔符号 默认 |
      props: {
        label: 'province_city',
        value: 'id',
        children: 'children'
      },
      options: JSON.parse(areaTree)
    });

    form.on('submit(*)', function(data){
        console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
        return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    });

  });
  </script>
</html>

demo下载地址：传送门

专业前端小白

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
2
评论
layui多选级联选择器的实现

在做项目的过程中经常会遇到要使用级联选择的时候，级联选择器如何实现多选呢？先来看看效果：源代码如下：<html lang="en"> <meta charset="utf-8"> <title>LayUI RC-Cascader</title> <link rel="stylesheet" href="./js/layui-v2.5.6/layui/css/layui.css"> <style> html,
复制链接

扫一扫