html下拉列表“省市关联列表”js和jq两种方法实现_html省份选择下拉菜单-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44722237/article/details/117716735

该博客展示了如何使用JavaScript和jQuery分别实现省市级联的效果。通过创建二维数组存储省份和城市数据，当选择省份时，动态更新城市下拉列表。JavaScript版本通过DOM操作实现，而jQuery版本利用其简洁的API完成相同功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

javascript省市级联

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>省市级联</title>
	</head>

	<body>
		<select onchange="changeCity(this.value)">
			<option>--请选择省份--</option>
			<option value="0">北京</option>
			<option value="1">浙江省</option>
			<option value="2">河北省</option>
			<option value="3">广东省</option>
		</select>
		<select id="city">
		</select>
	</body>

</html>
<script>
	//创建二维数组存储省份和对应的城市
	var cityList = new Array();
	cityList[0] = new Array("朝阳区", "海淀区", "东城区", "西城区");
	cityList[1] = new Array("杭州市", "嘉兴市", "宁波市", "绍兴市");
	cityList[2] = new Array("石家庄市", "唐山市", "承德市", "张家口市");
	cityList[3] = new Array("广州市", "惠州市", "深圳市", "茂名市");

	function changeCity(val) {
		//获取到城市的下拉列表框
		var city = document.getElementById("city");
		//先去清空原有的城市下拉列表内容
		city.options.length = 0;
		var arr = cityList[val];
		for(var i = 0; i < arr.length; i++) {
			//创建option元素节点
			var option = document.createElement("option");
			//设置option元素节点的内容和value
			option.innerHTML = arr[i];
			option.value = arr[i];
			//将新创建的option节点添加到城市下拉框中
			city.appendChild(option);
		}
	}
</script>

效果图;

jquery省市级联

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>省市级联</title>
		<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
	</head>

	<body>
		<select id="province">
			<option>--请选择省份--</option>
			<option value="0">北京</option>
			<option value="1">浙江省</option>
			<option value="2">河北省</option>
			<option value="3">广东省</option>
		</select>
		<select id="city">
		</select>
	</body>

</html>
<script>
	$(function() {
		//创建二维数组存储省份和对应的城市
		var cityList = new Array();
		cityList[0] = new Array("朝阳区", "海淀区", "东城区", "西城区");
		cityList[1] = new Array("杭州市", "嘉兴市", "宁波市", "绍兴市");
		cityList[2] = new Array("石家庄市", "唐山市", "承德市", "张家口市");
		cityList[3] = new Array("广州市", "惠州市", "深圳市", "茂名市");
		$("#province").change(function() {
			//获取到城市的下拉列表框
			var city = $("#city");
			//先去清空原有的列表内容
			city.html("");
			var arr = cityList[$(this).val()];
			var str = "";
			for(var i = 0; i < arr.length; i++) {
				str += '<option value=' + arr[i] + '>' + arr[i] + '</option>';
			}
			city.html(str);
		});
	});
</script>

效果图：