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

原创 2016年08月29日 21:51:22

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

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


版权声明:本文为博主原创文章,如有转载不胜荣幸。

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

1,最近项目用到了省市区三级联动,起初想通过json的方式来实现,无意中碰到了这个,还挺好用的,记录下来,方便自己也方便别人。 2,因为项目前台框架为bootstrap所以没有用这个小插件自己的css...
  • kangguowei
  • kangguowei
  • 2016年08月29日 21:51
  • 594

jQuery EasyUI Combobox 二级区域联动

01 $(function(){ 02         var provinceId = $('#provinceId').combobox({ ...
  • jspvsjsj
  • jspvsjsj
  • 2014年01月26日 23:09
  • 1101

js实现省市区三级联动select

如题。         使用js模拟省市区三级联动select。         需要的插件如下:         jquery.provincesCity.js:http://pan.baid...
  • killzero
  • killzero
  • 2014年01月16日 15:22
  • 3230

基于Jquery全国省市区三级联动(含全国省市区数据)

个人学习web开发过程中的一些经验总结,希望这个博客能记录下我的成长历程,每天进步一点。 也希望跟大家共同学习,欢迎评论,转载请注明出处....
  • Nifury
  • Nifury
  • 2016年04月15日 09:53
  • 4591

全国城市二级联动js插件

js代码部分:/* * 全国三级城市联动 js版 */ function Dsy(){ this.Items = {}; } Dsy.prototype.add = function(id...
  • hj960511
  • hj960511
  • 2016年05月10日 09:31
  • 4592

JavaScript省市二级联动

XML文件负责保存所需要的数据,而HTML文件负责通过javascript解析XML数据并显示在页面上。代码如下: cities.xml  长春 吉林市 四平 ...
  • user_longling
  • user_longling
  • 2014年08月11日 20:29
  • 1227

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

请选择省份 请选择城市 请选择区县 ...
  • dongdong0000856989
  • dongdong0000856989
  • 2012年07月06日 13:59
  • 1079

javaScript实现省市区三级联动

1.新建一个JSP文件 html> head> title>QQ JS省市区三级联动title> http://ip.qq.com/js/geo.js"> --> script type="...
  • sinat_35010585
  • sinat_35010585
  • 2016年06月05日 21:48
  • 1181

jquery省市二级联动插件

/***  * 插件名称: 中国省市信息联动插件  */ $._cityInfo = [{"n":"北京市","c":["北京市"]}, {"n":"天津市","c":["天津市"]}, ...
  • Mydwr
  • Mydwr
  • 2013年04月07日 14:32
  • 2046

jquery 省市二级联动

省市两级联动选择 select { width: 135px; } fieldset dl dd { float: left; margin-left: 20px; } fieldset pre {...
  • Outsider_der
  • Outsider_der
  • 2015年12月12日 01:55
  • 4349
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js 省市区三级(二级)联动
举报原因:
原因补充:

(最多只允许输入30个字)