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