手动实践：省份城市的三级联动

最新推荐文章于 2024-06-09 20:17:27 发布

LAN_victory

最新推荐文章于 2024-06-09 20:17:27 发布

阅读量841

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/m0_57142613/article/details/122374142

版权

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>省份城市的三级联动</title>
    </head>
    <body>
    	<select id="province">
    		<option value="-1">请选择</option> <!-- 由于数组下标从0开始，因此这里的value属性设为-1，避免将其识别为某个地区 -->
    	</select>
    	<select id="city"></select>
    	<select id="country"></select>

    	<script type="text/javascript">
    		var provinceArr = ['上海','江苏','河北'];
    		var cityArr = [
    		['上海市'],
    		['苏州市','南京市','扬州市'],
    		['石家庄','秦皇岛','张家口']
    		];
    		var countryArr = [
    		[
    		['黄浦区','静安区','长宁区','浦东区']
    		],[
    		['虎丘区','吴中区','相城区','姑苏区','吴江区'],['玄武区','秦淮区','建邺区','鼓楼区','浦口区'],['邗江区','广陵区','江都区']
    		],[
    		['长安区','桥西区','新华区','井陉矿区'],['海港区','山海关区','北戴河区','抚宁区'],['桥东区','桥西区','宣化区','下花园区']
    		]
    		];

    		// 省份下拉菜单
    		function createOption(obj, data){
    			for(var i in data){
    				var op = new Option(data[i], i);
    				obj.options.add(op);
    			}
    		}
    		var province = document.getElementById('province');
    		createOption(province,provinceArr);

    		//城市下拉菜单
    		var city = document.getElementById('city');
    		province.onchange = function() {
    			city.options.length = 0;
    			createOption(city,cityArr[province.value]);
    		};

    		//区域下拉菜单
    		var country = document.getElementById('country');
    		city.onchange = function(){
    			country.options.length = 0;
    			createOption(country,countryArr[province.value][city.value]);
    		}

    		//修改省份province的onchange事件
    		province.onchange = function() {
    			city.options.length = 0;
    			createOption(city, cityArr[province.value]);
    			if (province.value >= 0) {
    				city.onchange();		//自动添加城市对应区域下拉菜单
    			} else {
    				country.options.length = 0;		//清空country下的原有option
    			}
    		};
    	</script>
    </body>
</html>

效果图：