二级联动

最新推荐文章于 2021-06-09 22:07:40 发布

原创最新推荐文章于 2021-06-09 22:07:40 发布 · 177 阅读

0 ·

CC 4.0 BY-SA版权

移动开发专栏收录该内容

58 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的简单的省市联动下拉选择器。通过预定义的数据结构，当用户选择省份时，相应的城市列表会自动更新。此示例展示了基本的JavaScript与HTML交互的方法。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>二级省市联动</title>
		<script src="../js/jquery-1.11.1.js"></script>
		<script>
			$(function() {
				var shengfen = [["邯郸", "仓州"], ["安阳", "洛阳"]];
				//给省份选项改变的事件
				$("#pro").change(function() {
					//清空上次
					$("#cityx").siblings().remove();
					var sheng = $(this).val();//省份对应value
					for(var i = 0; i < shengfen[sheng].length; i++) {
						var $o = $("<option></option>");//创建option标签
						$o.html(shengfen[sheng][i]);
						$("#city").append($o);
					}
				});
			});
		</script>
	</head>
	<body>
		<form>
			<select id="pro">
				<option>---请选择省份</option>
				<option value="0">河北省</option>
				<option value="1">河南省</option>
			</select>
			<select id="city">
				<option id="cityx">---请选择城市</option>
			</select>
		</form>
	</body>
</html>