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

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


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

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

请选择省份 请选择城市 请选择区县 ...

原生JS实现省市区(县)三级联动选择

原文地址→看过来写在前面前段时间写一个关于天气的东西,里面的省市区(县)城市选择让我很头疼,在网上搜索出来大都是借助插件或者第三方库,感觉这样做代码会很重,所以索性就把几种城市选择的方式实现一遍,以备...

JS+JSON 省市区 三级联动 SELECT

//城市列表 var cityList={ "v1001":[["dd1"],["ww1"],["rr1"]], "v1002":[["daad1"],["waaw1"],["raar1"]],...

JS省市区三级联动

JS省市区三级联动 HTML Code: [html] view plain copy html>   he...

js实现省市区三级联动

New Document 请选择 请选择 请选择 var city_data=""; city_data="110000|北京市...

js读取xml实现省市区三级联动(改进)

html部分代码如下:city.html 

vue省市区三级联动mysql,js,html/jsp

  • 2017年12月06日 19:49
  • 264KB
  • 下载

中国省市区JSON以及JS三级联动

  • 2017年11月10日 09:29
  • 34KB
  • 下载

纯JS省市区三级联动(行政区划代码更新至2015-9-30)

本文代码实现的功能是省市区三级联动下拉列表,纯Javascript,网上已有很多这方面的代码。但是作为一个新手,这是我的第一篇CSDN博客,发此文的目的主要是学习交流,希望看到的朋友发现有什么不对的地...

纯JS省市区三级联动 超炫

  • 2017年07月06日 13:52
  • 60KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js 省市区三级(二级)联动
举报原因:
原因补充:

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