美文网首页
Cascader js级联选择器

Cascader js级联选择器

作者: PoWerfulHeart | 来源:发表于2021-12-07 16:34 被阅读0次

Cascader

介绍

一款极简风格的JavaScript级联选择器,拿来即用,不依赖任何框架

注意事项

日常开发中写的小组件,有问题请移步GitHub Issue

使用

  ...
  <script type="text/javascript" src="dist/js/cascader.min.js"></script>
  <script>
  var cascader = new Cascader({
      container: 'body',       // => document.querySelector(container).innerHTML
      width: 228,             // cascader's width
      callback: function (data) {      // selected value callback
        // {
        //   data: Array,   //selected full data source
        //   value: String  //selected value
        // }
        console.log(data);
      },
      defaultValue: '四川省/成都市/金牛区',     //string: 四川省/成都市/金牛区  or array: [0, 0, 0]
      data: [{
        className: 'sichuan',        // If the value is not empty, it will be set to class
        value: '四川省',             // value and html title
        child: [{
          className: 'chengdu',
          value: '成都市',
          child: [{
            className: '',
            value: '金牛区'
          }, {
            className: '',
            value: '成华区'
          }, {
            className: '',
            value: '锦江区'
          }, {
            className: '',
            value: '高新区'
          }, {
            className: '',
            value: '青羊区'
          }, {
            className: '',
            value: '武侯区',
            child: [{
              className: '',
              value: '桂溪街道办'
            }]
          }]
        }]
      }, {
        className: 'yunnan',
        value: '云南省',
        child: [{
          className: '',
          value: '丽江市',
          child: [{
            className: '',
            value: '古城区'
          }]
        }]
      }, {
        className: 'jiangsu',
        value: '江苏省',
        child: [{
          className: '',
          value: '南京市'
        }]
      }, {
        className: 'guangdong',
        value: '广东省',
        child: [{
          className: '',
          value: '广州市',
          child: [{
            className: '',
            value: '荔湾区'
          }, {
            className: '',
            value: '越秀区'
          }]
        }, {
          className: '',
          value: '深圳市',
          child: [{
            className: '',
            value: '南山区'
          }, {
            className: '',
            value: '光明区'
          }]
        }]
      }, {
        className: 'ningxia',
        value: '广西壮族自治区',
        child: [{
          className: '',
          value: '南宁市'
        }]
      }]
    });

    cascader.init();      // init() current() reset()
  </script>

预览

image.png

下载

Cascader

相关文章

网友评论

      本文标题:Cascader js级联选择器

      本文链接:https://www.haomeiwen.com/subject/qokaxrtx.html