省市联动，省份是先写好的

2019独角兽企业重金招聘Python工程师标准>>>

省份在页面写好，之后根据省份来判断后面要显示的城市，两个联动效果

html：

<li class="spe">
        	<label>
        		<input type="text" id="province" placeholder='省' readonly="true">
        		<span id='proMessage' style='display:none'>
        		   <em>安徽</em>
                        <em>北京</em>
                        <em>福建</em>
                        <em>甘肃</em>
                        <em>广东</em>
                        <em>广西</em>
                        <em>贵州</em>
                        <em>海南</em>
                        <em>河北</em>
                        <em>河南</em>
                        <em>黑龙江</em>
                        <em>湖北</em>
                        <em>湖北</em>
                        <em>湖南</em>
                        <em>吉林</em>
                        <em>江苏</em>
                        <em>江西</em>
                        <em>辽宁</em>
                        <em>内蒙古</em>
                        <em>宁夏</em>
                        <em>青海</em>
                        <em>山东</em>
                        <em>山西</em>
                        <em>陕西</em>
                        <em>上海</em>
                        <em>四川</em>
                        <em>天津</em>
                        <em>西藏</em>
                        <em>新疆</em>
                        <em>云南</em>
                        <em>浙江</em>
                        <em>重庆</em>
                        <em>香港</em>
                        <em>澳门</em>
                        <em>台湾</em>
        		</span>
        	</label>
            <label>
            	<input type="text" id="city" placeholder='市' readonly="true">
            	<span id='cityMessage' style='display:none'>
            		       <em>北京</em>
        			<em>北京</em>
        			<em>北京</em>
        			<em>北京</em>
        			<em>北京</em>
            	</span>
            </label>

事先都是隐藏的，根据省份选择后，动态的改变后面cityMessage标签里面的em的内容，然后可以进行后续操作了

联动js

var cities = {'安徽':['安庆市','蚌埠市','巢湖市','池州市','滁州市','阜阳市','合肥市','淮北市','淮南市','黄山市','六安市','马鞍山','宿州市','铜陵市','芜湖市','宣城市','亳州市'],
'北京':['北京市'],
'福建':['福州市','龙岩市','南平市','宁德市','莆田市','泉州市','三明市','厦门市','漳州市'],
'甘肃':['白银市','定西市','甘南市','嘉峪关市','金昌市','酒泉市','兰州市','临夏市','陇南市','平凉市','庆阳市','天水市','武威市','张掖市'],
'广东':['潮州市','东莞市','佛山市','广州市','河源市','惠州市','江门市','揭阳市','茂名市','梅州市','清远市','汕头市','汕尾市','韶关市','深圳市','阳江市','云浮市','湛江市','肇庆市','中山市','珠海市'],
'广西':['百色市','北海市','崇左市','防城港市','桂林市','贵港市','河池市','贺州市','来宾市','柳州市','南宁市','钦州市','梧州市','玉林市'],
'贵州':['安顺市','毕节市','贵阳市','六盘水市','黔东南市','黔南市','黔西南市','铜仁市','遵义市'],
'海南':['白沙市','保亭市','昌江市','澄迈市','定安市','东方市','海口市','乐东市','临高县市','陵水市','琼海市','琼中市','三亚市','屯昌市','万宁市','文昌市','五指山市','儋州市'],
'河北':['保定市','沧州市','承德市','邯郸市','衡水市','廊坊市','秦皇岛市','石家庄市','唐山市','邢台市','张家口市'],
'河南':['安阳市','鹤壁市','济源市','焦作市','开封市','洛阳市','南阳市','平顶山市','三门峡市','商丘市','新乡市','信阳市','许昌市','郑州市','周口市','驻马店市','漯河市','濮阳市'],
'黑龙江':['大庆市','大兴安岭市','哈尔滨市','鹤岗市','黑河市','鸡西市','佳木斯市','牡丹江市','七台河市','齐齐哈尔市','双鸭山市','绥化市','伊春市'],
'湖北':['鄂州市','恩施市','黄冈市','黄石市','荆门市','荆州市','潜江市','神农架市','十堰市','随州市','天门市','武汉市','仙桃市','咸宁市','襄樊市','孝感市','宜昌市'],
'湖南':['常德市','长沙市','郴州市','衡阳市','怀化市','娄底市','邵阳市','湘潭市','湘西市','益阳市','永州市','岳阳市','张家界市','株洲市'],
'吉林':['白城市','白山市','长春市','吉林市','辽源市','四平市','松原市','通化市','延边市'],
'江苏':['常州市','淮安市','连云港市','南京市','南通市','苏州市','宿迁市','泰州市','无锡市','徐州市','盐城市','扬州市','镇江市'],
'江西':['抚州市','赣州市','吉安市','景德镇市','九江市','南昌市','萍乡市','上饶市','新余市','宜春市','鹰潭市'],
'辽宁':['鞍山市','本溪市','朝阳市','大连市','丹东市','抚顺市','阜新市','葫芦岛市','锦州市','辽阳市','盘锦市','沈阳市','铁岭市','营口市'],
'内蒙古':['阿拉善盟市','巴彦淖尔盟市','包头市','赤峰市','鄂尔多斯市','呼和浩特市','呼伦贝尔市','通辽市','乌海市','乌兰察布盟市','锡林郭勒盟市','兴安盟市'],
'宁夏':['固原市','石嘴山市','吴忠市','银川市'],
'青海':['果洛市','海北市','海东市','海南市','海西市','黄南市','西宁市','玉树市'],
'山东':['滨州市','德州市','东营市','菏泽市','济南市','济宁市','莱芜市','聊城市','临沂市','青岛市','日照市','泰安市','威海市','潍坊市','烟台市','枣庄市','淄博市'],
'山西':['长治市','大同市','晋城市','晋中市','临汾市','吕梁市','朔州市','太原市','忻州市','阳泉市','运城市'],
'陕西':['安康市','宝鸡市','汉中市','商洛市','铜川市','渭南市','西安市','咸阳市','延安市','榆林市'],
'上海':['上海市'],
'四川':['阿坝市','巴中市','成都市','达州市','德阳市','甘孜市','广安市','广元市','乐山市','凉山市','眉山市','绵阳市','南充市','内江市','攀枝花市','遂宁市','雅安市','宜宾市','资阳市','自贡市','泸州市'],
'天津':['天津市'],
'西藏':['阿里市','昌都市','拉萨市','林芝市','那曲市','日喀则市','山南市'],
'新疆':['阿克苏市','阿拉尔市','巴音郭楞市','博尔塔拉市','昌吉市','哈密市','和田市','喀什市','克拉玛依市','克孜勒苏柯尔克孜市','石河子市','图木舒克市','吐鲁番市','乌鲁木齐市','五家渠市','伊犁市'],
'云南':['保山市','楚雄市','大理市','德宏市','迪庆市','红河市','昆明市','丽江市','临沧市','怒江市','曲靖市','思茅市','文山市','西双版纳市','玉溪市','昭通市'],
'浙江':['杭州市','湖州市','嘉兴市','金华市','丽水市','宁波市','绍兴市','台州市','温州市','舟山市','衢州市'],
'重庆':['重庆市'],
'香港':['香港市'],
'澳门':['澳门市'],
'台湾':['台湾市']
};
$(function(){ 
	//省
	$('#province').click(function(event) {
		$('#proMessage').toggle();
	});
	$('#proMessage').find('em').off('tap').on('tap',function(event) {
		event.preventDefault();   //很可能是点击了两次，阻止默认行为，很重要
		var proName = $(this).text();
		$('#province').val(proName);
		$(this).parent().hide();
		changeCityByProvince(proName);       //省份联动市的函数
		$('#city').val('');
		/* Act on the event */
	});

	//市
	$('#city').click(function(event) {
		$('#cityMessage').toggle();
	});
})
function changeCityByProvince(province){            //公用的函数，拿来就能用的，改最后就可以了
	var len = 0;
	if(province>''){
		if(province=='深圳') province='广东';
		try{
		var city = cities[province];
		len = city.length;
		}catch(e){}
	}
	var ret = '';
	for(var i=0;i<len;i++){
		var m = city[i];
		ret += '<em onclick =cityShow("'+m+'")>'+city[i]+'</em>';
	}
	$("#cityMessage").html(ret);
}
function cityShow(obj){ 
	event.preventDefault();
	$('#city').val(obj);
	$('#cityMessage').hide();
}

转载于:https://my.oschina.net/leonaLily/blog/410818