<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection"content="telephone=no, email=no" />
<title>省市县三级联动</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<style type="text/css">
*{margin: 0;padding: 0;}
body{font-size: 14px;color: #333;}
ul{padding-left: 20px;}
</style>
<script type="text/javascript">
var cityjson = '{'
+ '"province" : ['
+ '{"id" : "1", "name" : "北京市"},'
+ '{"id" : "2", "name" : "山西省"},'
+ '{"id" : "3", "name" : "河北省"}'
+ '],'
+ '"city" : ['
+ '{"cid" : "1", "id" : "1", "name":"海淀区"},'
+ '{"cid" : "1", "id" : "2", "name":"西城区"},'
+ '{"cid" : "1", "id" : "2", "name":"东城区"},'
+ '{"cid" : "1", "id" : "3", "name":"朝阳区"},'
+ '{"cid" : "2", "id" : "4", "name":"太原市"},'
+ '{"cid" : "2", "id" : "5", "name":"大同市"},'
+ '{"cid" : "2", "id" : "6", "name":"阳泉市"},'
+ '{"cid" : "3", "id" : "7", "name":"石家庄"},'
+ '{"cid" : "3", "id" : "8", "name":"蚌埠市"},'
+ '{"cid" : "3", "id" : "9", "name":"张家口"}'
+ '],'
+ '"county" : ['
+ '{"cid" : "1", "id" : "1", "name":"中关村"},'
+ '{"cid" : "1", "id" : "2", "name":"五道口"},'
+ '{"cid" : "2", "id" : "3", "name":"西直门"},'
+ '{"cid" : "2", "id" : "4", "name":"新街口"},'
+ '{"cid" : "2", "id" : "5", "name":"小西天"},'
+ '{"cid" : "3", "id" : "6", "name":"东直门"},'
+ '{"cid" : "3", "id" : "7", "name":"雍和宫"},'
+ '{"cid" : "3", "id" : "8", "name":"北新桥"},'
+ '{"cid" : "5", "id" : "9", "name":"城区"},'
+ '{"cid" : "5", "id" : "10", "name":"南郊区"},'
+ '{"cid" : "5", "id" : "11", "name":"开发区"}'
+ ']'
+'}';
;(function($, window, document, undefined){
$.fn.showCity = function(opt){
this.defaults = {
'cityjson' : cityjson, //json字符串变量名
'defaultShow' : false, //市、县是否显示,默认不显示
'showCounty' : true, //是否显示县
'defaultCity' : [0,0,0] //默认城市，对应id
};
this.options = $.extend({}, this.defaults, opt);
var oCityJson = eval('('+this.options.cityjson+')'),
oProvince = $('.province',this),
oCity = $('.city',this),
oCounty = $('.county',this),
provinces = oCityJson.province,
citys = oCityJson.city,
countys = oCityJson.county;
//创建省
this.creatProvince = function(){
var html = '';
for(var i=0; i<provinces.length; i++){
html += '<option value='+provinces[i].id+'>'+provinces[i].name+'</option>';
}
oProvince.append(html);
};
this.creat = function(){
oProvince.html('<option value="0">选择省</option>');
this.creatProvince();
if(this.options.defaultShow){
oCity.show();
oCounty.show();
oCity.html('<option value="0">选择市</option>');
oCounty.html('<option value="0">选择县</option>');
};
this.defaultCity();
this.checkProvince();
if(this.options.showCounty){
this.checkCounty();
}
};
//默认城市
this.defaultCity = function(){
if(this.options.defaultCity.toString() == '0,0,0'){
return;
};
var optionsCity = '';
for(var i=0; i<provinces.length; i++){
if(provinces[i].id == this.options.defaultCity[0]){
oProvince.val(provinces[i].id);
for(var j=0; j<citys.length; j++){
if(citys[j].cid == provinces[i].id){
optionsCity += '<option value='+citys[j].id+'>'+citys[j].name+'</option>'
}
}
oCity.append(optionsCity).show();
}
};
var optionscounty = '';
for(var i=0; i<citys.length; i++){
if(citys[i].id == this.options.defaultCity[1] && citys[i].cid == oProvince.val()){
oCity.val(citys[i].id);
if(this.options.showCounty){
for(var j=0; j<countys.length; j++){
if(countys[j].cid == citys[i].id){
optionscounty += '<option value='+countys[j].id+'>'+countys[j].name+'</option>';
}
}
oCounty.append(optionscounty).show();
}
}
};
if(this.options.showCounty){
for(var i=0; i<countys.length; i++){
if(countys[i].id == this.options.defaultCity[2] && countys[i].cid == oCity.val()){
oCounty.val(countys[i].id);
}
};
}
}
this.checkProvince = function(){
oProvince.bind('change',function(){
var html = '<option value="0">选择市</option>';
var val = $(this).val();
for(var i=0; i<citys.length; i++){
if(citys[i].cid == val){
html += '<option value='+citys[i].id+'>'+citys[i].name+'</option>'
}
}
oCity.html(html).show();
oCounty.html('<option value="0">选择县</option>');
})
};
this.checkCounty = function(){
oCity.bind('change',function(){
var html = '<option value="0">选择县</option>';
var val = $(this).val();
for(var i=0; i<countys.length; i++){
if(countys[i].cid == val){
html += '<option value='+countys[i].id+'>'+countys[i].name+'</option>'
}
}
oCounty.html(html).show();
})
};
return this.creat();
}
}(jQuery, window, document))
$(function(){
$('#selectItem').showCity({
"defaultCity" : [2,5,10]
});
})
</script>
</head>
<body>
<div class="selectItem" id="selectItem">
<select class="province"></select>
<select class="city" style="display:none"></select>
<select class="county" style="display:none"></select>
</div>
</body>
</html>