main

分支 (2)

标签 (6)

管理

管理

main

gh-pages

v1.7.6

v1.7.5

v1.7.1

v1.7.0

1.0

v1.0

lay_cascader
/
index.html

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="https://unpkg.com/layui@2.9.10/dist/css/layui.css"/>
  <!--    <link rel="stylesheet" type="text/css" href="./cascader/cascader.css"/>-->
  <script src="https://unpkg.com/layui@2.9.10/dist/layui.js"></script>
  <script src="./cascader/cascader.js?css=true"></script>
  <script src="./data/options.js"></script>
  <title>LayCascader级联组件演示</title>
  <style>
    .layui-colla-content {
      max-height: 450px;
      overflow: auto;
    }
  </style>
</head>
<body>
<div>
  <!--基础用法-->
  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>基础用法</legend>
  </fieldset>

  <div class="layui-bg-gray" style="padding: 30px;">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md6">
        <div class="layui-panel">
          <div class="layui-card">
            <div class="layui-card-header">默认 click 触发子菜单</div>
            <div style="margin: 10px 20px;"><input id="demo1"/></div>
            <div class="layui-card-body">
              <div class="layui-collapse option">
                <div class="layui-colla-item">
                  <h2 class="layui-colla-title">代码</h2>
                  <div class="layui-colla-content">
                             <pre class="layui-code">
&lt;input id="demo1"/&gt;
layui.use('layCascader', function () {
    var layCascader = layui.layCascader;
    layCascader({
      elem: '#demo1',
      options: options
    });
});
                             </pre>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="layui-col-md6">
        <div class="layui-panel">
          <div class="layui-card">
            <div class="layui-card-header">hover 触发子菜单</div>
            <div style="margin: 10px 20px;"><input id="demo2"/></div>
            <div class="layui-card-body">
              <div class="layui-collapse option">
                <div class="layui-colla-item">
                  <h2 class="layui-colla-title">代码</h2>
                  <div class="layui-colla-content">
                             <pre class="layui-code">
&lt;input id="demo2"/&gt;
layui.use('layCascader', function () {
    var layCascader = layui.layCascader;
    layCascader({
      elem: '#demo2',
      options: options,
      props: {
        expandTrigger: 'hover'
      }
    });
});
                             </pre>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md6">
        <div class="layui-panel">
          <div class="layui-card">
            <div class="layui-card-header">默认 click 触发子菜单-监听选中变更</div>
            <div style="margin: 10px 20px;"><input id="demo1_1"/></div>
            <div class="layui-card-body">
              <div class="layui-collapse option">
                <div class="layui-colla-item">
                  <h2 class="layui-colla-title">代码</h2>
                  <div class="layui-colla-content">
                             <pre class="layui-code">
&lt;input id="demo1_1"/&gt;
layui.use('layCascader', function () {
    var layCascader = layui.layCascader;
    var demo1_1 = layCascader({
      elem: '#demo1_1',
      options: options
    });
    demo1_1.changeEvent(function (value, node) {
      layer.msg('value:' + value + ',Node:' + JSON.stringify(node.data));
    });
});
                             </pre>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="layui-col-md6">
        <div class="layui-panel">
          <div class="layui-card">
            <div class="layui-card-header">hover 触发子菜单-获取当前选中值</div>
            <div style="margin: 10px 20px;"><input id="demo2_1"/>
              <button id="demo2_1_click" type="button" class="layui-btn layui-btn-primary layui-border-blue">
                获取当前选中值
              </button>
            </div>
            <div class="layui-card-body">
              <div class="layui-collapse option">
                <div class="layui-colla-item">
                  <h2 class="layui-colla-title">代码</h2>
                  <div class="layui-colla-content">
                             <pre class="layui-code">
&lt;input id="demo2_1"/&gt;
&lt;button id="demo2_1_click" type="button" class="layui-btn layui-btn-primary layui-border-blue"&gt;获取当前选中值&lt;/button&gt;
layui.use('layCascader', function () {
    var layCascader = layui.layCascader;
    var demo2_1 = layCascader({
      elem: '#demo2_1',
      options: options,
      props: {
        expandTrigger: 'hover'
      }
    });
    $('#demo2_1_click').click(function () {
      // 这里是单选，获取的是一个值，如果是多选则是一个数组
      var value = demo2_1.getCheckedValues();
      var node = demo2_1.getCheckedNodes();
      if (!value) {
        layer.msg('未选中值');
        return;
      }
      layer.msg('value:' + value + ',Node:' + JSON.stringify(node.data));
    });
});
                             </pre>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--禁用选项-->
  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>禁用选项</legend>
  </fieldset>
  <blockquote class="layui-elem-quote">通过在数据源中设置 disabled 字段来声明该选项是禁用的</blockquote>

  <div class="layui-bg-gray" style="padding: 30px;">
    <div class="layui-row layui-col-space15">
      <div class="layui-panel">
        <div class="layui-card">
          <div style="margin: 10px 20px;"><input id="demo3"/></div>
          <div class="layui-card-body">
            <div class="layui-collapse option2">
              <div class="layui-colla-item">
                <h2 class="layui-colla-title">代码</h2>
                <div class="layui-colla-content">
                             <pre class="layui-code">
&lt;input id="demo3"/&gt;
/*本例中，options指定的数组中的第一个元素含有disabled: true键值对，因此是禁用的。在默认情况下，Cascader 会检查数据中每一项的disabled字段是否为true，如果你的数据中表示禁用含义的字段名不为disabled，可以通过props.disabled属性来指定（详见下方 API 表格）。当然，value、label和children这三个字段名也可以通过同样的方式指定。*/
layui.use('layCascader', function () {
    var layCascader = layui.layCascader;
    var options = [{
        value: 'zhinan',
        label: '指南',
        disabled: true,
        children: [{
          value: 'shejiyuanze',
          label: '设计原则',
          children: [{
            value: 'yizhi',
            label: '一致'
          }, {
            value: 'fankui',
            label: '反馈'
          }, {
            value: 'xiaolv',
            label: '效率'
          }, {
            value: 'kekong',
            label: '可控'
          }]
        }, {
          value: 'daohang',
          label: '导航',
          children: [{
            value: 'cexiangdaohang',
            label: '侧向导航'
          }, {
            value: 'dingbudaohang',
            label: '顶部导航'
          }]
        }]
      }, {
        value: 'zujian',
        label: '组件',
        children: [{
          value: 'basic',
          label: 'Basic',
          children: [{
            value: 'layout',
            label: 'Layout 布局'
          }, {
            value: 'color',
            label: 'Color 色彩'
          }, {
            value: 'typography',
            label: 'Typography 字体'
          }, {
            value: 'icon',
            label: 'Icon 图标'
          }, {
            value: 'button',
            label: 'Button 按钮'
          }]
        }, {
          value: 'form',
          label: 'Form',
          children: [{
            value: 'radio',
            label: 'Radio 单选框'
          }, {
            value: 'checkbox',
            label: 'Checkbox 多选框'
          }, {
            value: 'input',
            label: 'Input 输入框'
          }, {
            value: 'input-number',
            label: 'InputNumber 计数器'
          }, {
            value: 'select',
            label: 'Select 选择器'
          }, {
            value: 'cascader',
            label: 'Cascader 级联选择器'
          }, {
            value: 'switch',
            label: 'Switch 开关'
          }, {
            value: 'slider',
            label: 'Slider 滑块'
          }, {
            value: 'time-picker',
            label: 'TimePicker 时间选择器'
          }, {
            value: 'date-picker',
            label: 'DatePicker 日期选择器'
          }, {
            value: 'datetime-picker',
            label: 'DateTimePicker 日期时间选择器'
          }, {
            value: 'upload',
            label: 'Upload 上传'
          }, {
            value: 'rate',
            label: 'Rate 评分'
          }, {
            value: 'form',
            label: 'Form 表单'
          }]
        }, {
          value: 'data',
          label: 'Data',
          children: [{
            value: 'table',
            label: 'Table 表格'
          }, {
            value: 'tag',
            label: 'Tag 标签'
          }, {
            value: 'progress',
            label: 'Progress 进度条'
          }, {
            value: 'tree',
            label: 'Tree 树形控件'
          }, {
            value: 'pagination',
            label: 'Pagination 分页'
          }, {
            value: 'badge',
            label: 'Badge 标记'
          }]
        }, {
          value: 'notice',
          label: 'Notice',
          children: [{
            value: 'alert',
            label: 'Alert 警告'
          }, {
            value: 'loading',
            label: 'Loading 加载'
          }, {
            value: 'message',
            label: 'Message 消息提示'
          }, {
            value: 'message-box',
            label: 'MessageBox 弹框'
          }, {
            value: 'notification',
            label: 'Notification 通知'
          }]
        }, {
          value: 'navigation',
          label: 'Navigation',
          children: [{
            value: 'menu',
            label: 'NavMenu 导航菜单'
          }, {
            value: 'tabs',
            label: 'Tabs 标签页'
          }, {
            value: 'breadcrumb',
            label: 'Breadcrumb 面包屑'
          }, {
            value: 'dropdown',
            label: 'Dropdown 下拉菜单'
          }, {
            value: 'steps',
            label: 'Steps 步骤条'
          }]
        }, {
          value: 'others',
          label: 'Others',
          children: [{
            value: 'dialog',
            label: 'Dialog 对话框'
          }, {
            value: 'tooltip',
            label: 'Tooltip 文字提示'
          }, {
            value: 'popover',
            label: 'Popover 弹出框'
          }, {
            value: 'card',
            label: 'Card 卡片'
          }, {
            value: 'carousel',
            label: 'Carousel 走马灯'
          }, {
            value: 'collapse',
            label: 'Collapse 折叠面板'
          }]
        }]
      }, {
        value: 'ziyuan',
        label: '资源',
        children: [{
          value: 'axure',
          label: 'Axure Components'
        }, {
          value: 'sketch',
          label: 'Sketch Templates'
        }, {
          value: 'jiaohu',
          label: '组件交互文档'
        }]
      }];
    layCascader({
        elem: '#demo3',
        options: options
    });
});
                             </pre>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--可清空-->
  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>可清空</legend>
  </fieldset>
  <blockquote class="layui-elem-quote">通过 clearable 设置输入框可清空</blockquote>

  <div class="layui-bg-gray" style="padding: 30px;">
    <div class="layui-row layui-col-space15">
      <div class="layui-panel">
        <div class="layui-card">
          <div style="margin: 10px 20px;"><input id="demo4"/></div>
          <div class="layui-card-body">
            <div class="layui-collapse option">
              <div class="layui-colla-item">
                <h2 class="layui-colla-title">代码</h2>
                <div class="layui-colla-content">
                             <pre class="layui-code">
&lt;input id="demo4"/&gt;
layui.use('layCascader', function () {
    var layCascader = layui.layCascader;
    layCascader({
      elem: '#demo4',
      clearable: true,
      options: options
    });
});
                             </pre>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--多选-->
  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>多选</legend>
  </fieldset>
  <blockquote class="layui-elem-quote">可通过 props.multiple = true 来开启多选模式</blockquote>

  <div class="layui-bg-gray" style="padding: 30px;">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md6">
        <div class="layui-panel">
          <div class="layui-card">
            <div class="layui-card-header">默认显示所有Tag</div>
            <div style="margin: 10px 20px;"><input id="demo5"/></div>
            <div class="layui-card-body">
              <div class="layui-collapse option">
                <div class="layui-colla-item">
                  <h2 class="layui-colla-title">代码</h2>
                  <div class="layui-colla-content">
                             <pre class="layui-code">
&lt;input id="demo5"/&gt;
layui.use('layCascader', function () {
    var layCascader = layui.layCascader;
    layCascader({
      elem: '#demo5',
      clearable: true,
      options: options,
      props: {
        multiple: true
      }
    });
});
                             </pre>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="layui-col-md6">
        <div class="layui-panel">
          <div class="layui-card">
            <div class="layui-card-header">折叠展示Tag</div>
            <div style="margin: 10px 20px;"><input id="demo6"/></div>
            <div class="layui-card-body">
              <div class="layui-collapse option">
                <div class="layui-colla-item">
                  <h2 class="layui-colla-title">代码</h2>
                  <div class="layui-colla-content">
                             <pre class="layui-code">
&lt;input id="demo6"/&gt;
//在开启多选模式后，默认情况下会展示所有已选中的选项的Tag，你可以使用collapseTags来折叠Tag
//默认情况下折叠仅展示一条tag，你可以使用minCollapseTagsNumber来指定最小tag
layui.use('layCascader', function () {
    var layCascader = layui.layCascader;
    layCascader({
      elem: '#demo6',
      clearable: true,
      collapseTags: true,
      minCollapseTagsNumber: 2,
      options: options,
      props: {
        multiple: true
      }
    });
});
                             </pre>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--选择任意一级选项-->
  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>选择任意一级选项</legend>
  </fieldset>
  <blockquote class="layui-elem-quote">在单选模式下，你只能选择叶子节点；而在多选模式下，勾选父节点真正选中的都是叶子节点。启用该功能后，可让父子节点取消关联，选择任意一级选项。<br>可通过
    props.checkStrictly = true 来设置父子节点取消选中关联，从而达到选择任意一级选项的目的。
  </blockquote>

  <div class="layui-bg-gray" style="padding: 30px;">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md6">
        <div class="layui-panel">
          <div class="layui-card">
            <div class="layui-card-header">单选选择任意一级选项</div>
            <div style="margin: 10px 20px;"><input id="demo7"/></div>
            <div class="layui-card-body">
              <div class="layui-collapse option">
                <div class="layui-colla-item">
                  <h2 class="layui-colla-title">代码</h2>
                  <div class="layui-colla-content">
                             <pre class="layui-code">
&lt;input id="demo7"/&gt;
layui.use('layCascader', function () {
    var layCascader = layui.layCascader;
    layCascader({
      elem: '#demo7',
      clearable: true,
      options: options,
      props: {
        checkStrictly: true
      }
    });
});
                             </pre>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="layui-col-md6">
        <div class="layui-panel">
          <div class="layui-card">
            <div class="layui-card-header">多选选择任意一级选项</div>
            <div style="margin: 10px 20px;"><input id="demo8"/></div>
            <div class="layui-card-body">
              <div class="layui-collapse option">
                <div class="layui-colla-item">
                  <h2 class="layui-colla-title">代码</h2>
                  <div class="layui-colla-content">
                             <pre class="layui-code">
&lt;input id="demo8"/&gt;
layui.use('layCascader', function () {
    var layCascader = layui.layCascader;
    layCascader({
      elem: '#demo8',
      clearable: true,
      options: options,
      props: {
        multiple: true,
        checkStrictly: true
      }
    });
});
                             </pre>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--仅显示最后一级-->
  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>仅显示最后一级</legend>
  </fieldset>
  <blockquote class="layui-elem-quote">可以仅在输入框中显示选中项最后一级的标签，而不是选中项所在的完整路径。<br>属性showAllLevels定义了是否显示完整的路径，将其赋值为false则仅显示最后一级
  </blockquote>

  <div class="layui-bg-gray" style="padding: 30px;">
    <div class="layui-row layui-col-space15">
      <div class="layui-panel">
        <div class="layui-card">
          <div class="layui-card-header">仅显示最后一级</div>
          <div style="margin: 10px 20px;"><input id="demo9"/></div>
          <div class="layui-card-body">
            <div class="layui-collapse option">
              <div class="layui-colla-item">
                <h2 class="layui-colla-title">代码</h2>
                <div class="layui-colla-content">
                             <pre class="layui-code">
&lt;input id="demo9"/&gt;
layui.use('layCascader', function () {
    var layCascader = layui.layCascader;
     layCascader({
      elem: '#demo9',
      showAllLevels: false,
      options: options
    });
});
                             </pre>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--可搜索-->
  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>可搜索</legend>
  </fieldset>
  <blockquote class="layui-elem-quote">
    将filterable赋值为true即可打开搜索功能，默认会匹配节点的label或所有父节点的label(由showAllLevels决定)中包含输入值的选项。你也可以用filterMethod自定义搜索逻辑，接受一个函数，第一个参数是节点node，第二个参数是搜索关键词keyword，通过返回布尔值表示是否命中。
  </blockquote>

  <div class="layui-bg-gray" style="padding: 30px;">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md6">
        <div class="layui-panel">
          <div class="layui-card">
            <div class="layui-card-header">单选可搜索</div>
            <div style="margin: 10px 20px;"><input id="demo10"/>
              <button id="demo10_click" type="button" class="layui-btn layui-btn-primary layui-border-blue">
                改变组件禁用状态
              </button>
            </div>
            <div class="layui-card-body">
              <div class="layui-collapse option">
                <div class="layui-colla-item">
                  <h2 class="layui-colla-title">代码</h2>
                  <div class="layui-colla-content">
                             <pre class="layui-code">
&lt;input id="demo10"/&gt;
layui.use('layCascader', function () {
    var layCascader = layui.layCascader;
    layCascader({
        elem: '#demo10',
        clearable: true,
        filterable: true,
        options: options
    });
});
                             </pre>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="layui-col-md6">
        <div class="layui-panel">
          <div class="layui-card">
            <div class="layui-card-header">多选可搜索</div>
            <div style="margin: 10px 20px;"><input id="demo11"/>
              <button id="demo11_click" type="button" class="layui-btn layui-btn-primary layui-border-blue">
                改变组件禁用状态
              </button>
            </div>
            <div class="layui-card-body">
              <div class="layui-collapse option">
                <div class="layui-colla-item">
                  <h2 class="layui-colla-title">代码</h2>
                  <div class="layui-colla-content">
                             <pre class="layui-code">
&lt;input id="demo11"/&gt;
layui.use('layCascader', function () {
    var layCascader = layui.layCascader;
    layCascader({
        elem: '#demo11',
        clearable: true,
        filterable: true,
        options: options,
        props:{
            multiple: true
        }
    });
});
                             </pre>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md6">
        <div class="layui-panel">
          <div class="layui-card">
            <div class="layui-card-header">单选无关联可搜索</div>
            <div style="margin: 10px 20px;"><input id="demo12"/>
              <button id="demo12_click" type="button" class="layui-btn layui-btn-primary layui-border-blue">
                改变组件禁用状态
              </button>
            </div>
            <div class="layui-card-body">
              <div class="layui-collapse option">
                <div class="layui-colla-item">
                  <h2 class="layui-colla-title">代码</h2>
                  <div class="layui-colla-content">
                             <pre class="layui-code">
&lt;input id="demo12"/&gt;
layui.use('layCascader', function () {
    var layCascader = layui.layCascader;
    layCascader({
      elem: '#demo12',
      filterable: true,
      clearable: true,
      options: options,
      props: {
        checkStrictly: true
      }
    });
});
                             </pre>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="layui-col-md6">
        <div class="layui-panel">
          <div class="layui-card">
            <div class="layui-card-header">多选无关联可搜索</div>
            <div style="margin: 10px 20px;"><input id="demo13"/>
              <button id="demo13_click" type="button" class="layui-btn layui-btn-primary layui-border-blue">
                改变组件禁用状态
              </button>
            </div>
            <div class="layui-card-body">
              <div class="layui-collapse option">
                <div class="layui-colla-item">
                  <h2 class="layui-colla-title">代码</h2>
                  <div class="layui-colla-content">
                             <pre class="layui-code">
&lt;input id="demo13"/&gt;
layui.use('layCascader', function () {
    var layCascader = layui.layCascader;
    layCascader({
      elem: '#demo13',
      options: options,
      filterable: true,
      clearable: true,
      props: {
        checkStrictly: true,
        multiple: true
      }
    });
});
                             </pre>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!--回显-->
  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>回显</legend>
  </fieldset>

  <div class="layui-bg-gray" style="padding: 30px;">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md6">
        <div class="layui-panel">
          <div class="layui-card">
            <div class="layui-card-header">单选回显</div>
            <div style="margin: 10px 20px;"><input id="danXuanHuiXian"/></div>
            <div class="layui-card-body">
              <div class="layui-collapse option">
                <div class="layui-colla-item">
                  <h2 class="layui-colla-title">代码</h2>
                  <div class="layui-colla-content">
                             <pre class="layui-code">
&lt;input id="danXuanHuiXian"/&gt;
layui.use('layCascader', function () {
    var layCascader = layui.layCascader;
    layCascader({
      elem: '#danXuanHuiXian',
      value: 'dingbudaohang',
      options: options
    });
});
                             </pre>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="layui-col-md6">
        <div class="layui-panel">
          <div class="layui-card">
            <div class="layui-card-header">多选回显</div>
            <div style="margin: 10px 20px;"><input id="duoXuanHuiXian"/></div>
            <div class="layui-card-body">
              <div class="layui-collapse option">
                <div class="layui-colla-item">
                  <h2 class="layui-colla-title">代码</h2>
                  <div class="layui-colla-content">
                             <pre class="layui-code">
&lt;input id="duoXuanHuiXian"/&gt;
layui.use('layCascader', function () {
    var layCascader = layui.layCascader;
    layCascader({
      clearable: true,
      disabledFixed: true,  //固定禁用项，使禁用项不被清理删除，禁用项只能通过函数添加或初始值添加,默认禁用项不可被函数或初始值添加
      props: {
        multiple: true
      },
      elem: '#duoXuanHuiXian',
      value: ['yizhi', 'dingbudaohang', 'layout', 'cexiangdaohang'],
      options: options
    });
});
                             </pre>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md6">
        <div class="layui-panel">
          <div class="layui-card">
            <div class="layui-card-header">单选无关联回显</div>
            <div style="margin: 10px 20px;"><input id="danXuanHuiXian2"/></div>
            <div class="layui-card-body">
              <div class="layui-collapse option">
                <div class="layui-colla-item">
                  <h2 class="layui-colla-title">代码</h2>
                  <div class="layui-colla-content">
                             <pre class="layui-code">
&lt;input id="danXuanHuiXian2"/&gt;
layui.use('layCascader', function () {
    var layCascader = layui.layCascader;
    layCascader({
      props: {
        checkStrictly: true
      },
      elem: '#danXuanHuiXian2',
      value: 'shejiyuanze',
      options: options
    });
});
                             </pre>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="layui-col-md6">
        <div class="layui-panel">
          <div class="layui-card">
            <div class="layui-card-header">多选无关联回显</div>
            <div style="margin: 10px 20px;"><input id="duoXuanHuiXian2"/></div>
            <div class="layui-card-body">
              <div class="layui-collapse option">
                <div class="layui-colla-item">
                  <h2 class="layui-colla-title">代码</h2>
                  <div class="layui-colla-content">
                             <pre class="layui-code">
&lt;input id="duoXuanHuiXian2"/&gt;
layui.use('layCascader', function () {
    var layCascader = layui.layCascader;
    layCascader({
      props: {
        multiple: true,
        checkStrictly: true
      },
      disabledFixed: true,  //固定禁用项，使禁用项不被清理删除，禁用项只能通过函数添加或初始值添加,默认禁用项不可被函数或初始值添加
      clearable: true,
      elem: '#duoXuanHuiXian2',
      value: ['shejiyuanze', 'layout', 'cexiangdaohang'],
      options: options
    });
});
                             </pre>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--多选数量限制-->
  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>多选数量限制</legend>
  </fieldset>
  <blockquote class="layui-elem-quote">
    通过maxSize开启多选最大数量限制，该属性对单选无效果。默认值为0，表示的是无限制选中最大个数，大于0则表示限制选中个数。
  </blockquote>

  <div class="layui-bg-gray" style="padding: 30px;">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <div class="layui-panel">
          <div class="layui-card">
            <div class="layui-card-header">多选数量限制</div>
            <div style="margin: 10px 20px;"><input id="demo15"/></div>
            <div class="layui-card-body">
              <div class="layui-collapse option">
                <div class="layui-colla-item">
                  <h2 class="layui-colla-title">代码</h2>
                  <div class="layui-colla-content">
                             <pre class="layui-code">
&lt;input id="demo15"/&gt;
layui.use('layCascader', function () {
    var layCascader = layui.layCascader;
    layCascader({
      clearable: true,
      maxSize: 3,
      props: {
        multiple: true
      },
      elem: '#demo15',
      options: options
    });
});
                             </pre>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--动态加载-->
  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>动态加载</legend>
  </fieldset>
  <blockquote class="layui-elem-quote">
    通过lazy开启动态加载，并通过lazyload来设置加载数据源的方法。lazyload方法有两个参数，第一个参数node为当前点击的节点，第二个resolve为数据加载完成的回调(必须调用)。为了更准确的显示节点的状态，还可以对节点数据添加是否为叶子节点的标志位
    (默认字段为leaf，可通过props.leaf修改)，否则会简单的以有无子节点来判断是否为叶子节点。
  </blockquote>

  <div class="layui-bg-gray" style="padding: 30px;">
    <div class="layui-row layui-col-space15">
      <div class="layui-panel">
        <div class="layui-card">
          <div style="margin: 10px 20px;"><input id="demo14"/></div>
          <div class="layui-card-body">
            <div class="layui-collapse">
              <div class="layui-colla-item">
                <h2 class="layui-colla-title">代码</h2>
                <div class="layui-colla-content">
                             <pre class="layui-code">
&lt;input id="demo14"/&gt;
layui.use('layCascader', function () {
    var id = 0;
    // 动态加载
    layCascader({
      elem: '#demo14',
      props: {
        lazy: true,
        lazyLoad: function(node, resolve) {
          var level = node.level;
          setTimeout(function () {
            var nodes = Array.from({length: level + 2})
              .map(function (item) {
                return {
                  value: ++id,
                  label: '选项' + id,
                  leaf: level >= 1
                };
              });
            // 通过调用resolve将子节点数据返回，通知组件数据加载完成
            resolve(nodes);
          }, 1000);
        }
      }
    });
});
                             </pre>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>Attributes</legend>
  </fieldset>
  <div class="layui-form" style="margin: 0 40px;">
    <table class="layui-table">
      <thead>
      <tr>
        <th>参数</th>
        <th>说明</th>
        <th>类型</th>
        <th>可选值</th>
        <th>默认值</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>elem</td>
        <td>绑定元素</td>
        <td>String/jqueryObject/DOM</td>
        <td>-</td>
        <td>-</td>
      </tr>
      <tr>
        <td>value</td>
        <td>预设值</td>
        <td>Object/Array</td>
        <td>-</td>
        <td>null</td>
      </tr>
      <tr>
        <td>props</td>
        <td>配置选项，具体见下表</td>
        <td>Object</td>
        <td>-</td>
        <td>-</td>
      </tr>
      <tr>
        <td>options</td>
        <td>可选项数据源，键名可通过 props 属性配置</td>
        <td>Array</td>
        <td>-</td>
        <td>[]</td>
      </tr>
      <tr>
        <td>empty</td>
        <td>无匹配选项时的内容</td>
        <td>String</td>
        <td>-</td>
        <td>'暂无数据'</td>
      </tr>
      <tr>
        <td>placeholder</td>
        <td>输入框占位文本</td>
        <td>String</td>
        <td>-</td>
        <td>'请选择'</td>
      </tr>
      <tr>
        <td>disabled</td>
        <td>是否禁用</td>
        <td>Boolean</td>
        <td>true / false</td>
        <td>false</td>
      </tr>
      <tr>
        <td>clearable</td>
        <td>是否支持清空选项</td>
        <td>Boolean</td>
        <td>true / false</td>
        <td>false</td>
      </tr>
      <tr>
        <td>showAllLevels</td>
        <td>输入框中是否显示选中值的完整路径</td>
        <td>Boolean</td>
        <td>true / false</td>
        <td>true</td>
      </tr>
      <tr>
        <td>collapseTags</td>
        <td>多选模式下是否折叠Tag</td>
        <td>Boolean</td>
        <td>true / false</td>
        <td>false</td>
      </tr>
      <tr>
        <td>minCollapseTagsNumber</td>
        <td>最小折叠标签数</td>
        <td>Number</td>
        <td>-</td>
        <td>1</td>
      </tr>
      <tr>
        <td>separator</td>
        <td>选项分隔符</td>
        <td>String</td>
        <td>-</td>
        <td>' / '</td>
      </tr>
      <tr>
        <td>filterable</td>
        <td>是否可搜索选项</td>
        <td>Boolean</td>
        <td>true / false</td>
        <td>false</td>
      </tr>
      <tr>
        <td>filterMethod</td>
        <td>自定义搜索逻辑，第一个参数是节点node，第二个参数是搜索关键词keyword，通过返回布尔值表示是否命中</td>
        <td>Function</td>
        <td>-</td>
        <td>-</td>
      </tr>
      <tr>
        <td>debounce</td>
        <td>搜索关键词输入的去抖延迟，毫秒</td>
        <td>Number</td>
        <td>-</td>
        <td>300</td>
      </tr>
      <tr>
        <td>beforeFilter</td>
        <td>筛选之前的钩子，参数为输入的值，若返回 false,则停止筛选</td>
        <td>Function</td>
        <td>-</td>
        <td>-</td>
      </tr>
      <tr>
        <td>popperClass</td>
        <td>自定义浮层类名</td>
        <td>String</td>
        <td>-</td>
        <td>''</td>
      </tr>
      <tr>
        <td>extendClass</td>
        <td>继承class样式</td>
        <td>Boolean</td>
        <td>true / false</td>
        <td>false</td>
      </tr>
      <tr>
        <td>extendStyle</td>
        <td>继承style样式</td>
        <td>Boolean</td>
        <td>true / false</td>
        <td>false</td>
      </tr>
      <tr>
        <td>disabledFixed</td>
        <td>固定禁用项，使禁用项不被清理删除，禁用项只能通过函数添加或初始值添加,默认禁用项不可被函数或初始值添加</td>
        <td>Boolean</td>
        <td>true / false</td>
        <td>false</td>
      </tr>
      <tr>
        <td>maxSize</td>
        <td>多选选中的最大数量，0表示不限制</td>
        <td>Number</td>
        <td>>=0</td>
        <td>0</td>
      </tr>
      </tbody>
    </table>
  </div>
  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>Props</legend>
  </fieldset>
  <div class="layui-form" style="margin: 0 40px;">
    <table class="layui-table">
      <thead>
      <tr>
        <th>参数</th>
        <th>说明</th>
        <th>类型</th>
        <th>可选值</th>
        <th>默认值</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>strictMode</td>
        <td>严格模式,设置value严格按照层级结构.获取的value和Node也将按照层级结构返回.<br/>例如：<br/>多选:[['zhinan','shejiyuanze','yizhi']]<br/>单选:['zhinan','shejiyuanze','yizhi']
        </td>
        <td>Boolean</td>
        <td>true / false</td>
        <td>false</td>
      </tr>
      <tr>
        <td>expandTrigger</td>
        <td>次级菜单的展开方式</td>
        <td>String</td>
        <td>click / hover</td>
        <td>'click'</td>
      </tr>
      <tr>
        <td>multiple</td>
        <td>是否多选</td>
        <td>Boolean</td>
        <td>true / false</td>
        <td>false</td>
      </tr>
      <tr>
        <td>checkStrictly</td>
        <td>是否严格的遵守父子节点不互相关联</td>
        <td>Boolean</td>
        <td>true / false</td>
        <td>false</td>
      </tr>
      <tr>
        <td>lazy</td>
        <td>是否动态加载子节点，需与 lazyLoad 方法结合使用</td>
        <td>Boolean</td>
        <td>true / false</td>
        <td>false</td>
      </tr>
      <tr>
        <td>lazyLoad</td>
        <td>加载动态数据的方法，仅在 lazy 为 true 时有效</td>
        <td>Function(node, resolve)，node为当前点击的节点，resolve为数据加载完成的回调(必须调用)</td>
        <td>-</td>
        <td>-</td>
      </tr>
      <tr>
        <td>value</td>
        <td>指定选项的值为选项对象的某个属性值</td>
        <td>String</td>
        <td>-</td>
        <td>'value'</td>
      </tr>
      <tr>
        <td>label</td>
        <td>指定选项标签为选项对象的某个属性值</td>
        <td>String</td>
        <td>-</td>
        <td>'label'</td>
      </tr>
      <tr>
        <td>children</td>
        <td>指定选项的子选项为选项对象的某个属性值</td>
        <td>String</td>
        <td>-</td>
        <td>'children'</td>
      </tr>
      <tr>
        <td>disabled</td>
        <td>指定选项的禁用为选项对象的某个属性值（可以配合禁用固定项disabledFixed使用）</td>
        <td>String</td>
        <td>-</td>
        <td>'disabled'</td>
      </tr>
      <tr>
        <td>leaf</td>
        <td>指定选项的叶子节点的标志位为选项对象的某个属性值</td>
        <td>String</td>
        <td>-</td>
        <td>'leaf'</td>
      </tr>
      </tbody>
    </table>
  </div>
  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>Option</legend>
  </fieldset>
  <div class="layui-form" style="margin: 0 40px;">
    <table class="layui-table">
      <thead>
      <tr>
        <th>选项名称</th>
        <th>说明</th>
        <th>类型</th>
        <th>示例</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>value</td>
        <td>指定选项的值</td>
        <td>String、Number、Array</td>
        <td>'1'、1、[1]、[[1,2],[1,3]]</td>
      </tr>
      <tr>
        <td>label</td>
        <td>指定选项标签</td>
        <td>String</td>
        <td>'广东'</td>
      </tr>
      <tr>
        <td>children</td>
        <td>指定选项的子选项</td>
        <td>Array&lt;Option&gt;</td>
        <td>[{label: '广东', value: 'guangdong'}]</td>
      </tr>
      <tr>
        <td>disabled</td>
        <td>指定选项是否禁用</td>
        <td>Boolean</td>
        <td>true</td>
      </tr>
      <tr>
        <td>leaf</td>
        <td>指定选项是否是叶子节点</td>
        <td>Boolean</td>
        <td>true</td>
      </tr>
      </tbody>
    </table>
  </div>
  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>Event</legend>
  </fieldset>
  <div class="layui-form" style="margin: 0 40px;">
    <table class="layui-table">
      <thead>
      <tr>
        <th>方法名</th>
        <th>说明</th>
        <th>参数</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>setOptions</td>
        <td>设置当前选项</td>
        <td>Array</td>
      </tr>
      <tr>
        <td>setValue</td>
        <td>覆盖当前值.单选时传对象，多选时传数组</td>
        <td>非严格模式下。<br>单选：options中的value值<br>多选：options中的value值组成的数组<br>例如：<br>layCascader.setValue('yizhi')<br>layCascader.setValue(['yizhi','table'])
        </td>
      </tr>
      <tr>
        <td>changeEvent</td>
        <td>当节点变更时，执行回调<br>多选时，参数是一个数组</td>
        <td>单选：function(value,Node){}<br>多选：function(values,Nodes){}</td>
      </tr>
      <tr>
        <td>openEvent</td>
        <td>当面板打开时，执行回调</td>
        <td>function(){}</td>
      </tr>
      <tr>
        <td>closeEvent</td>
        <td>当面板关闭时，执行回调</td>
        <td>function(){}</td>
      </tr>
      <tr>
        <td>destroyEvent</td>
        <td>当面板销毁时，执行回调</td>
        <td>function(){}</td>
      </tr>
      <tr>
        <td>disabled</td>
        <td>禁用组件</td>
        <td>Boolean</td>
      </tr>
      <tr>
        <td>open</td>
        <td>展开面板</td>
        <td>-</td>
      </tr>
      <tr>
        <td>close</td>
        <td>收起面板</td>
        <td>-</td>
      </tr>
      <tr>
        <td>destroy</td>
        <td>销毁组件。销毁组件后不允许再次调用对象方法，但可以使用构造方法重新初始化组件。</td>
        <td>-</td>
      </tr>
      <tr>
        <td>getCheckedNodes</td>
        <td>获取选中的节点，如需获取路径，使用node.path获取,将获取各级节点的node对象。严格模式下返回包含父级的层级结构</td>
        <td>-</td>
      </tr>
      <tr>
        <td>getCheckedValues</td>
        <td>获取选中的值.严格模式下返回包含父级的层级结构</td>
        <td>-</td>
      </tr>
      <tr>
        <td>clearCheckedNodes</td>
        <td>清空选中的节点</td>
        <td>Boolean: 是否强制删除固定的禁用项，默认不会清空禁用项</td>
      </tr>
      <tr>
        <td>expandNode</td>
        <td>展开面板到节点所在的层级</td>
        <td>value: 节点值，只能传单个值，不允许传数组</td>
      </tr>
      <tr>
        <td>getConfig</td>
        <td>获取当前配置副本</td>
        <td>-</td>
      </tr>
      <tr>
        <td>setConfig</td>
        <td>设置配置参数</td>
        <td>Object，参考Attributes</td>
      </tr>
      <tr>
        <td>getData</td>
        <td>获取数据对象副本</td>
        <td>-</td>
      </tr>
      </tbody>
    </table>
  </div>
</div>
<!--您的Layui代码start-->
<script type="text/javascript">
  layui.use(['element', 'code', 'layCascader', 'layer', 'jquery'], function () {
    var layer = layui.layer;
    var element = layui.element;
    var $ = layui.jquery;
    var layCascader = layui.layCascader;
    var optionContent = $('<div class="layui-colla-item">\n' +
      ' <h2 class="layui-colla-title">选项</h2>\n' +
      ' <div class="layui-colla-content"><pre class="layui-code">' + JSON.stringify(options, null, 2) + '</pre></div>\n' +
      '</div>');
    var optionContent2 = $('<div class="layui-colla-item">\n' +
      ' <h2 class="layui-colla-title">选项</h2>\n' +
      ' <div class="layui-colla-content"><pre class="layui-code">' + JSON.stringify(options2, null, 2) + '</pre></div>\n' +
      '</div>');
    $('.layui-collapse.option').append(optionContent);
    $('.layui-collapse.option2').append(optionContent2);
    element.render('collapse');
    layui.code();

    // 默认 click 触发子菜单
    layCascader({
      elem: '#demo1',
      options: options
    });
    // hover 触发子菜单
    layCascader({
      elem: '#demo2',
      options: options,
      props: {
        expandTrigger: 'hover'
      }
    });
    // 默认 click 触发子菜单-监听值变更
    var demo1_1 = layCascader({
      elem: '#demo1_1',
      options: options
    });
    demo1_1.changeEvent(function (value, node) {
      layer.msg('value:' + value + ',Node:' + JSON.stringify(node.data));
    });
    // hover 触发子菜单 获取当前选中菜单
    var demo2_1 = layCascader({
      elem: '#demo2_1',
      options: options,
      props: {
        expandTrigger: 'hover'
      }
    });
    $('#demo2_1_click').click(function () {
      // 这里是单选，获取的是一个值，如果是多选则是一个数组
      var value = demo2_1.getCheckedValues();
      var node = demo2_1.getCheckedNodes();
      if (!value) {
        layer.msg('未选中值');
        return;
      }
      layer.msg('value:' + value + ',Node:' + JSON.stringify(node.data));
    });
    // 禁用选项
    layCascader({
      elem: '#demo3',
      options: options2
    });
    // 可清空
    layCascader({
      elem: '#demo4',
      clearable: true,
      options: options
    });
    // 多选-默认显示所有Tag
    layCascader({
      elem: '#demo5',
      clearable: true,
      options: options,
      props: {
        multiple: true
      }
    });
    // 多选-折叠展示Tag
    layCascader({
      elem: '#demo6',
      clearable: true,
      collapseTags: true,
      minCollapseTagsNumber: 2,
      options: options,
      props: {
        multiple: true
      }
    });
    // 单选选择任意一级选项
    layCascader({
      elem: '#demo7',
      clearable: true,
      options: options,
      props: {
        checkStrictly: true
      }
    });
    // 多选选择任意一级选项
    layCascader({
      elem: '#demo8',
      clearable: true,
      options: options,
      props: {
        multiple: true,
        checkStrictly: true
      }
    });
    // 仅显示最后一级
    layCascader({
      elem: '#demo9',
      showAllLevels: false,
      clearable: true,
      options: options
    });
    // 单选可搜索
    var demo10 = layCascader({
      elem: '#demo10',
      filterable: true,
      clearable: true,
      options: options
    });
    $('#demo10_click').click(function () {
      var config = demo10.getConfig();
      demo10.disabled(!config.disabled);
    })
    // 多选可搜索
    var demo11 = layCascader({
      elem: '#demo11',
      options: options,
      filterable: true,
      clearable: true,
      props: {
        multiple: true
      }
    });
    $('#demo11_click').click(function () {
      var config = demo11.getConfig();
      demo11.disabled(!config.disabled);
    })
    // 单选无关联可搜索
    var demo12 = layCascader({
      elem: '#demo12',
      filterable: true,
      clearable: true,
      options: options,
      props: {
        checkStrictly: true
      }
    });
    $('#demo12_click').click(function () {
      var config = demo12.getConfig();
      demo12.disabled(!config.disabled);
    })
    // 多选无关联可搜索
    var demo13 = layCascader({
      elem: '#demo13',
      options: options,
      filterable: true,
      clearable: true,
      props: {
        checkStrictly: true,
        multiple: true
      }
    });
    $('#demo13_click').click(function () {
      var config = demo13.getConfig();
      demo13.disabled(!config.disabled);
    })
    // 单选回显
    layCascader({
      // disabled: true,
      clearable: true,
      elem: '#danXuanHuiXian',
      value: 'yizhi',
      options: options
    });
    // 多选回显
    layCascader({
      clearable: true,
      disabledFixed: true,  //固定禁用项
      props: {
        multiple: true
      },
      elem: '#duoXuanHuiXian',
      value: ['yizhi', 'dingbudaohang', 'layout', 'cexiangdaohang'],
      options: options
    });
    // 多选数量限制
    layCascader({
      clearable: true,
      maxSize: 3,
      filterable: true,
      props: {
        multiple: true
      },
      elem: '#demo15',
      options: options
    });
    // 单选无关联回显
    layCascader({
      props: {
        checkStrictly: true
      },
      clearable: true,
      elem: '#danXuanHuiXian2',
      value: 'shejiyuanze',
      options: options
    });
    // 多选无关联回显
    layCascader({
      props: {
        multiple: true,
        checkStrictly: true
      },
      disabledFixed: true,  //固定禁用项
      clearable: true,
      elem: '#duoXuanHuiXian2',
      value: ['shejiyuanze', 'layout', 'cexiangdaohang'],
      options: options
    });
    var id = 0;
    // 动态加载
    layCascader({
      elem: '#demo14',
      props: {
        lazy: true,
        lazyLoad: function (node, resolve) {
          var level = node.level;
          setTimeout(function () {
            var nodes = Array.from({length: level + 2})
              .map(function (item) {
                return {
                  value: ++id,
                  label: '选项' + id,
                  leaf: level >= 1
                };
              });
            // 通过调用resolve将子节点数据返回，通知组件数据加载完成
            resolve(nodes);
          }, 1000);
        }
      }
    });
  });
</script>
</body>
</html>