首先在html頁面引入js:

    <script src="js/distpicker.data.js"></script>

    <script src="js/distpicker.js"></script>

html表單示例程式碼:

<!--三級聯動-->

<form class="form-inline">

   <div id="distpicker" data-toggle="distpicker" style="display: flex;justify-content: space-around;overflow: hidden;float: left;align-items: center;margin-left: 74px;width: 100%;">

      <label style="margin-right: 20px;">省市區地址:</label>

      <div class="form-group" style="margin-top: 10px;">

         <select class="form-control" id="province1"></select>

      </div>

      <div class="form-group" style="margin-top: 10px;">

         <select class="form-control" id="city1"></select>

      </div>

      <div class="form-group" style="margin-top: 10px;">

         <select class="form-control" id="district1"></select>

      </div>

   </div>

</form>
 

JS取值方式:

上面的省市區ID,是獲取省市區的國標編碼,也就是可以定義為ID的值

下面的省市區的Name,就是獲取省市區的名字

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

var provinceName = $("#province1").val();

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

var cityName = $("#city1").val();

var regionId = $("#distpicker").find('option:selected').eq(2).attr('data-code');

var regionName = $("#district1").val();
 

頁面回顯操作方式:

//先從後臺查詢出區的ID

var regionId = supplierBo.regionId;     

//然後弄出省市區

var province = regionId.substr(0,2)+'0000';  //省

var city = regionId.substr(0,4)+'00';   //市

var district = regionId.substr(0,6);   //區/縣

//然後呼叫如下程式碼即可

$("#distpicker").find('option[data-code="'+province+'"]').attr("selected","selected").trigger('change');        //回顯省市區

$("#distpicker").find('option[data-code="'+city+'"]').attr("selected","selected").trigger('change');

$("#distpicker").find('option[data-code="'+district+'"]').attr("selected","selected").trigger('change');