仿京东手机端地址选择四级地址选择

地址选择器是很多商城开发中必不可少的组件，有三级联动、四级联动等各种地址选择器。所有的地址选择的核心原理都是相同的，下面是仿京东地址选择的效果图：
这里写图片描述
使用方法：
install

npm install ajax-picker --save

import

import AjaxPicker from 'ajax-picker'

或者以普通的方式引入

<script src='ajax-picker.min.js'></script>
//src中的地址是ajax-picker.min.js的相对路径

html

<div id="container"></div> //插件容器

javascript

var picker = new AjaxPicker({
  title: '配送至', //选择器标题
  tipText: ['省份', '城市', '区/县'],  //选择器提示语（可以一个也可以多个，对应每一栏的选择提示语）
  input: 'address-input', //点击触发选择器的input的id
  container: 'container', //选择器的容器的id
  renderArr: [ //渲染函数数组，第一个函数对应第一个列表，以此类推，该数组中的函数数量和列表的数量一致
    function () {
      // 在这里写获取第一个列表数据的方法，通常是ajax
      // 在成功回调中加入下面这行代码，并将获取的数据传入:
      picker.render(your data)
      // 请确保你的获取到的数据是一个对象数组，并符合以下格式，每个对象至少拥有value(name)和id这两个key(将在用户选择完毕后返回)
      // 如果data不是一个对象数组，或者不符合格式要求，那么你可能要做一下数据处理，才能保证数据成功渲染出来：
      // [
      //   {value或name: '北京市', id: '0', other: ...},
      //   {value或name: '上海市', id: '1', other: ...},
      //   {value: '广东省', id: '2', other: ...}
      //   ...
      // ]
      // example:
      // $.ajax({
      //   ...
      //   success: function (data) {
      //     picker.render(data)
      //   }
      // })
    },
    function () {
      // 在这里写获取第二个列表数据的方法
      // 你可以通过picker.result1获取用户在第一列表的选择结果
      // picker.result1长这样：
      // {
      //   value: 'XXX',
      //   id:'XXX',
      //   index: 'XXX'
      // }
      // 在成功回调中加入下面这行代码，并将获取到的数据传入:
      picker.render(your data)
    },
    function () {
      // 在这里写获取第三个列表数据的方法
      // 你可以通过picker.result2获取用户在第二列表的选择结果
      // picker.result2长这样：
      // {
      //   value: 'XXX',
      //   id:'XXX',
      //   index: 'XXX'
      // }
      // 在成功回调中加入下面这行代码，并将获取到的数据传入:
      picker.render(your data)
    },
    ...
  ],
  success: function (arr) {
    // 用户选择完毕后调用，返回结果数组
    console.log(arr)
  }
})

组件的使用方法就是上面的代码。具体核心代码的编写可以参考ajax-picker.min.js

仿京东手机端地址选择四级地址选择

猜你喜欢