三级联动，json数据、可设置默认城市
闲来无事，折腾个三级联动，json数据、可设置默认城市、可配置是否显示第三级select
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>省市县三级联动</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <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>
