Cascader

介紹

一款極簡風格的JavaScript級聯(lián)選擇器痕届，拿來即用，不依賴任何框架

注意事項

日常開發(fā)中寫的小組件，有問題請移步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: '四川省/成都市/金牛區(qū)',     //string: 四川省/成都市/金牛區(qū)  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: '金牛區(qū)'
          }, {
            className: '',
            value: '成華區(qū)'
          }, {
            className: '',
            value: '錦江區(qū)'
          }, {
            className: '',
            value: '高新區(qū)'
          }, {
            className: '',
            value: '青羊區(qū)'
          }, {
            className: '',
            value: '武侯區(qū)',
            child: [{
              className: '',
              value: '桂溪街道辦'
            }]
          }]
        }]
      }, {
        className: 'yunnan',
        value: '云南省',
        child: [{
          className: '',
          value: '麗江市',
          child: [{
            className: '',
            value: '古城區(qū)'
          }]
        }]
      }, {
        className: 'jiangsu',
        value: '江蘇省',
        child: [{
          className: '',
          value: '南京市'
        }]
      }, {
        className: 'guangdong',
        value: '廣東省',
        child: [{
          className: '',
          value: '廣州市',
          child: [{
            className: '',
            value: '荔灣區(qū)'
          }, {
            className: '',
            value: '越秀區(qū)'
          }]
        }, {
          className: '',
          value: '深圳市',
          child: [{
            className: '',
            value: '南山區(qū)'
          }, {
            className: '',
            value: '光明區(qū)'
          }]
        }]
      }, {
        className: 'ningxia',
        value: '廣西壯族自治區(qū)',
        child: [{
          className: '',
          value: '南寧市'
        }]
      }]
    });

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

預覽

image.png

下載

Cascader