内沐的博客

分享是最好的品德

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

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

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


阅读更多
版权声明:本文为博主原创文章,如有转载不胜荣幸。 https://blog.csdn.net/kangguowei/article/details/52356744
文章标签: javascript
个人分类: 他山攻玉 js 相关
上一篇一周乱弹(1,摸态框增加纵向滚动条2,jQuery 鼠标点击事件3,通过ajax实现批量导出。4,windows查询占用某个端口号程序并杀死其进程)
下一篇输入输出流回头看
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭