使用distpicker生成省市区三级联动效果

墨蓝 2022-04-04 04:50 333阅读 0赞

**“秀樾横塘十里香，水花晚色静年芳”**  
今天在网上找了一个三级联动的js插件，感觉挺好用的，在这里分享一下。[参考原文地址][Link 1]

## 步骤 ##

1.  下载上面链接内容中的js源文件；
2.  在项目中引入该文件；

//在此之前你需要先引入jQuery的js和bootstrap的js源文件
    <script src="js/distpicker.data.js"></script>
    <script src="js/distpicker.js"></script>

1.  编写页面

<form class="form-inline">
          <div id="distpicker3">
            <div class="form-group">
              <label class="sr-only" for="province6">Province</label>
              <select class="form-control" id="province6"></select>
            </div>
            <div class="form-group">
              <label class="sr-only" for="city6">City</label>
              <select class="form-control" id="city6"></select>
            </div>
            <div class="form-group">
              <label class="sr-only" for="district6">District</label>
              <select class="form-control" id="district6"></select>
            </div>
          </div>
        </form>

1.  这样就可以访问页面了，下拉框中默认展示北京。  
    ![在这里插入图片描述][20181214224905115.png]
2.  如果想默认显示其他地市，则需编写js赋默认值。

$('#distpicker3').distpicker({
        province: '浙江省',
        city: '杭州市',
        district: '西湖区'
      });

效果如图：  
![在这里插入图片描述][20181214225036609.png]

[Link 1]: http://www.jq22.com/jquery-info8054
[20181214224905115.png]: /images/20220404/fdc39493011743189dd64619a3c6b17f.png
[20181214225036609.png]: /images/20220404/4a261961099149119dae5f5f4e102753.png