1、下载distpicker插件

使用npm命令

npm install distpicker@2.0.4 --save

2、引用（在ts文件中）

require('distpicker'); // 三级联动的插件
let $ = require('jquery');

3、HTML中

<div id="distpicker" ><select id="provinceName"></select><select id="cityName"></select><select id="districtName"></select>
</div>

4、初始化

//初始化
$('#distpicker').distpicker();

效果

• 自定义占位文本

$('#distpicker').distpicker(   province: '--请选择省份--',city: '--请选择市--',district: '--请选择区/县--'
);//或者自定义初始化选中的省市县
$('#distpicker').distpicker(   province: '上海市',city: '上海城区',district: '徐汇区'
);

效果图

5、如何获取选中的值

 var province = $("#provinceName").find("option:selected").text();var city = $("#cityName").find("option:selected").text();var district = $("#districtName").find("option:selected").text();

6、获取选中区域的编码

var provinceId = $("#distpicker").find('option:selected').eq(0).attr('data-code');
var cityId = $("#distpicker").find('option:selected').eq(1).attr('data-code');
var distinctId = $("#distpicker").find('option:selected').eq(2).attr('data-code');

7、修改全局默认参数

$('#distpicker').distpicker({placeholder:false
});

• autoSelect：类型：Boolean，默认值：true。
  • 是否当省改变时自动选择市和区。
• placeholder：类型：Boolean，默认值：true。
  • 是否显示占位文本。

• valueType: 'name'
  Select value. Options: 'name' and 'code'

• province：类型：String，
  • 默认值：―― 省 ――,定义省份的初始值。
  • 如果在distpicker.data.js文件中存在该省份，将会被选择，否则显示占位文本。
• city：类型：String
  • 默认值：―― 市 ――,定义市的初始值。
  • 如果在distpicker.data.js文件中存在该市，将会被选择，否则显示占位文本。