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

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

简单引入


<!-- 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>

调用方法

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

调用重置方法

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

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

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

设置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];//获取区名称，如：东城区