jQuery省市二级联动实现

最新推荐文章于 2025-06-05 11:45:45 发布

原创最新推荐文章于 2025-06-05 11:45:45 发布 · 2.8k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery

JavaWeb 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个简单的省市联动选择器的实现方法，通过使用HTML、JavaScript和jQuery，实现了当用户选择省份时，相应城市列表会自动更新的功能。

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

<!DOCTYPE html>
<html>

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

		<script src="../js/jquery-1.11.3.min.js"></script>

		<script>
			var province = ["湖北", "湖南", "广东", "河北"]

			var city = [
				["武汉", "黄冈", "十堰"],
				["长沙", "岳阳", "怀化"],
				["深圳", "广州", "惠州"],
				["石家庄", "天津", "常德"]
			];

			$(function() {
				//初始化数据
				initData();
 				//为省份下拉列表绑定change事件
				$("#pro").change(function() {
					var index = $(this).val();
					$("#city").html("<option>请选择</option>");
					$(city[index]).each(function(i, obj) {

						var option = "<option value='" + i + "'>" + obj + "</option>"
						$("#city").append(option);
					})
				})
			})

			function initData() {
			 //初始化省份下拉列表
				$(province).each(function(index, obj) {
					var option = "<option value='" + index + "'>" + obj + "</option>"
					$("#pro").append(option);

				})
			}
		</script>

	</head>

	<body>
	<select id="pro">

		<option>请选择</option>

	</select>

	<select id="city">

		<option>请选择</option>

	</select>

	</body>

	
</html>