使用js、jquery完成省市二级联动-优快云博客

本文详细介绍了如何使用原生JavaScript和jQuery实现网页上的省市二级联动效果，通过动态生成下拉选项，为用户提供更佳的交互体验。文章提供了完整的代码示例，包括HTML结构、JavaScript逻辑及jQuery插件应用。

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

使用js完成省市二级联动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>使用js完成省市二级联动</title>

		<script>
			var cities = new Array(4);
			cities[0] = new Array("武汉市", "黄冈市", "襄阳市", "荆州市");
			cities[1] = new Array("长沙市", "株洲市", "岳阳市");
			cities[2] = new Array("石家庄市", "邯郸市", "廊坊市", "保定市");
			cities[3] = new Array("安阳市", "洛阳市", "开封市", "安阳市");

			function selectCity(value) {

				var cityEle = document.getElementById("city");

				cityEle.options.length = 0;
				
				for (var i = 0; i < cities.length; i++) {
					if (value == i) {
						for (var j = 0; j < cities[i].length; j++) {
							var textNode = document.createTextNode(cities[i][j]);
							var opEle = document.createElement('option');
							opEle.appendChild(textNode);
							cityEle.appendChild(opEle);
						}
					}
				}
			}
		</script>
	</head>
	<body>
		<tr>
			<td>籍贯</td>
			<td>
				<select onchange="selectCity(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>
			</td>
		</tr>

	</body>
</html>

使用jquery完成省市二级联动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>使用jquery完成省市二级联动</title>
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<script>
			$(function() {
				var cities = new Array(4);
				cities[0] = new Array("武汉市", "黄冈市", "襄阳市", "荆州市");
				cities[1] = new Array("长沙市", "株洲市", "岳阳市");
				cities[2] = new Array("石家庄市", "邯郸市", "廊坊市", "保定市");
				cities[3] = new Array("安阳市", "洛阳市", "开封市", "安阳市");

				$("#province").change(function() {

					$("#city").empty();
					
					var val = this.value;
					$.each(cities, function(i,n) {

						if (val == i) {
							$.each(cities[i], function(j, m) {
								var textNode = document.createTextNode(m);
								var opEle = document.createElement("option");
								$(opEle).append(textNode);
								$(opEle).appendTo($("#city"));
							});
						}
					});
				});
			});
		</script>
	</head>
	<body>
		<tr>
			<td>籍贯</td>
			<td>
				<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>
			</td>
		</tr>
	</body>
</html>