省市区三级联动选择器：轻松选择您的地址

2023-11-28 18:29:52

省-市-区三级联动城市地区选择器是一款轻便、灵活的地址选择器，可让您轻松选择您的地址。它无依赖，纯JS手写，不依赖任何插件。只需在您的HTML中添加几个元素，即可轻松集成此选择器。

特点

无依赖，纯JS手写，不依赖任何插件
轻便、灵活，易于集成
支持多级联动，可选择省、市、区/县
支持模糊搜索，可快速找到您需要的地址
支持自定义样式，可与您的网站风格保持一致

如何使用

在您的HTML中添加以下元素：

<div id="lc-city-selector"></div>

在您的JavaScript代码中，添加以下代码：

var citySelector = new LCSLector({
  container: '#lc-city-selector',
  data: data,
  level: 3,
  onSelect: function(selectedData) {
    console.log(selectedData);
  }
});

将您的地址数据传递给选择器：

var data = {
  province: [
    {
      name: '北京市',
      code: '110000',
      city: [
        {
          name: '东城区',
          code: '110101',
          district: [
            {
              name: '东华门街道',
              code: '110101001'
            },
            {
              name: '安定门街道',
              code: '110101002'
            }
          ]
        },
        {
          name: '西城区',
          code: '110102',
          district: [
            {
              name: '金融街街道',
              code: '110102001'
            },
            {
              name: '西单街道',
              code: '110102002'
            }
          ]
        }
      ]
    },
    {
      name: '天津市',
      code: '120000',
      city: [
        {
          name: '和平区',
          code: '120101',
          district: [
            {
              name: '南开街道',
              code: '120101001'
            },
            {
              name: '北宁街道',
              code: '120101002'
            }
          ]
        },
        {
          name: '河东区',
          code: '120102',
          district: [
            {
              name: '东马路街道',
              code: '120102001'
            },
            {
              name: '西马路街道',
              code: '120102002'
            }
          ]
        }
      ]
    }
  ]
};