关闭

js 省市区三级(二级)联动

标签: javascript
389人阅读 评论(0) 收藏 举报
分类:

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

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

3,页面效果。

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

实现过程

5,在项目中加入这些js

6,引入js

   

<script src="statics/js/jquery-2.1.4.min.js"></script>
<script src="statics/js/bootstrap.min.js"></script>  <pre name="code" class="html"><script type="text/javascript" src="statics/js/citys/jquery.cityselect.js"></script>


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设置为自己实际的路径



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

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


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:67018次
    • 积分:1291
    • 等级:
    • 排名:千里之外
    • 原创:63篇
    • 转载:27篇
    • 译文:1篇
    • 评论:2条