前端JQuery插件distpicker.js的部分操作使用

前端JQuery插件distpicker.js的部分操作使用

前言：
需要导入的插件JQuery以及distpicker.js。distpicker GitHub官网，可在官网查询，也可在bootcdn中下载。

1. 简单引入

<!-- 
	data-toggle="distpicker"必选,data-value-type="code"可选，表示选中值为省市区代码，
	data-province 可选，默认省级显示
	data-city 可选，默认市级显示
	data-district 可选，默认区级显示
 -->
<div data-toggle="distpicker" id="distpicker"  data-value-type="code">
	<select data-province="--省--" id="province"></select>
	<select data-city="--市--" id="city"></select>
	<select data-district="--区--" id="district"></select>
</div>
<!-- 导入需要的js文件 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/distpicker.js" type="text/javascript" charset="utf-8"></script>

2. 调用方法

//所有执行的调用方法，需使用JQuery对象来调用，定义如下：
var $distpicker = $("#distpicker");

3. 调用重置方法

$("#province").distpicker("reset")//重置到默认状态，如果设置了初始选中项，恢复至初始选中，如北京市
$("#province").distpicker("reset",true)//重置到初始状态,如 --省--。这就是两者的区别

4. 未设置data-value-type="code"获取值，此时是无法获取省市区代码

//可直接使用JQuery获取值的方式去获取
$("#province").val();//获取省，如：北京市
$("#city").val();//获取市，如：北京城区
$("#district").val();//获取区，如：东城区

5. 设置data-value-type="code"获取代码以及值

//先获取省市区代码，再获取值
let province = $("#province").val();//获取省级代码，如：110000
let city = $("#city").val();//获取市级代码，如：110100
let district = $("#district").val();//获取区级代码，如：110101
//再使用getDistricts方法获取值，注意：使用getDistricts获取的是当前代码下的区，
//比如110000获取的是北京市下的所有省，110100获取北京城区下的所有区，如不填获取的是全国的省。
$("#province").distpicker("getDistricts")[province];//获取省名称，如：北京市
$("#province").distpicker("getDistricts",province)[city];//获取市名称，如：北京城区
$("#province").distpicker("getDistricts",city)[district];//获取区名称，如：东城区

6. destroy销毁方法，使用方法是：$("#province").distpicker(“destroy”)，目前使用没有效果，未知原因，但是一般实际应用来说这个方法一般用不到。
7. 其他创建自定义方法请参考GitHub官方文档