js 省市区三级（二级）联动

清疚 2022-07-17 03:28 392阅读 0赞

1,最近项目用到了省市区三级联动，起初想通过json的方式来实现，无意中碰到了这个，还挺好用的，记录下来，方便自己也方便别人。

2，因为项目前台框架为bootstrap所以没有用这个小插件自己的css，而是采用了bootstrap风格样式。

3，页面效果。

![Center][]

4，可以把城市名称直接存储到数据库。

![Center 1][]

实现过程

5，在项目中加入这些js

![Center 2][]

6，引入js

7，页面

<div class="form-group">
    				               <label class="col-sm-2 control-label">户口所在省、市区:</label>
                                  <div id="city_2" class="row">
    								  <div class="col-md-3">
    									  <select class="prov form-control" name="resSeatProvince"></select>
    								  </div>
    								  <div class="col-md-3">
    									  <select class="city form-control" name="resSeatCity"></select>
    								  </div>
    								  <div class="col-md-3">
    									  <select class="dist form-control" name="resSeatArea"></select>
    								  </div>
                                  </div>
    					      </div>

8，js调用

$(function(){
          //省市区
                $("#city_2").citySelect({
                    prov:"北京",
                    nodata:"none"
                });
    });

注意：要把jquery.cityselect.js中的url设置为自己实际的路径

![Center 3][]

资源下载链接：http://download.csdn.net/detail/kangguowei/9616263

时维九月，序属三秋，不要再该奋斗的时候过多的享受。我不是为了工作而工作，为了生活而生活，为了学习而学习，自始至终我都是为了能够成为一个感知沉静与快乐，希望与美好的人。让这个秋天焕发出更多的精彩吧。加油，每个人。

[Center]: /images/20220717/b0f25c669ae84e98b946837de1c0b7a3.png
[Center 1]: /images/20220717/205b1a24d04842d88bfa708c07b09a74.png
[Center 2]: /images/20220717/abe0c1f47b5b4d45b86f21a0a7e78e9f.png
[Center 3]: /images/20220717/4affeb9f3ffa44a182427dd0f07f6fb5.png