jQuery Distpicker是一個基于jQuery的省市區(qū)三級聯(lián)動插件。它實(shí)現(xiàn)了一個用戶友好的界面，可以讓用戶選擇他們所在的省、市和區(qū)，同時它也非常容易被集成到各種Web應(yīng)用程序中。

如果你想使用該插件，首先你要下載jQuery、Bootstrap和Distpicker CSS和JS文件。如下所示：

// Download jQuery and Bootstrap
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" >
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
// Download Distpicker plugin
<link rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/distpicker@2.0.2/dist/distpicker.js"></script>

在下載完成后，你需要將Distpicker與相應(yīng)的HTML元素關(guān)聯(lián)起來。只需要為這些元素添加class和data-toggle等屬性即可。如下所示：

<!-- Distpicker --><div class="form-row">
<div class="form-group col-md-4">
<label class="col-form-label">Province</label>
<select class="form-control" name="province"></select>
</div>
<div class="form-group col-md-4">
<label class="col-form-label">City</label>
<select class="form-control" name="city"></select>
</div>
<div class="form-group col-md-4">
<label class="col-form-label">District</label>
<select class="form-control" name="district"></select>
</div>
</div>
<script>
// Initiate Distpicker
$('.distpicker').distpicker();
</script>

最后，你的布局和效果將與下圖所示相似。