前端速成：双月Java之旅（week4）_day4

最新推荐文章于 2024-10-17 23:32:38 发布

若凡໌້ᮨ

最新推荐文章于 2024-10-17 23:32:38 发布

阅读量125

点赞数

文章标签： java 前端 servlet

本文链接：https://blog.csdn.net/weixin_53673193/article/details/126090252

版权

今天学习的是使用JS完成省市联动，即在下拉选择框中选中某个省后下一级的下拉框显示的是对应省内的市。

首先是准备工作，我们需要准备一些省和市的数据。

步骤分析：

                1. 确定事件: onchange
               2. 函数: selectProvince()
               3. 函数里面要完成以下操作：
                   得到当前操作元素
                   得到当前选中的是那一个省份
                   从数组中取出对应的城市信息
                   动态创建城市元素节点
                   添加到城市select中

首先我们搭建HTML主体框架，内容为两个下拉框<select>。然后在第一个<select>里面使用onchange事件，包含有onchange事件的标签在发生改变时会触发绑定的函数selectProvince。我们需要用数组来引入数据。然后是定义函数，首先是var province = document.getElementById("province")得到当前选中的是哪个省份，然后从数组中取出对应的城市信息，var cityText = cities[i]; 动态创建城市元素节点然后创建option节点var option1 = document.createElement("option")，再创建城市文本节点var textNode = document.createTextNode(cityText)，之后将option节点和文本内容关联起来option1.appendChild(textNode)，最后添加到城市select中 citySelect.appendChild(option1)。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			var provinces = [
				["深圳市","东莞市","惠州市","广州市"],
				["长沙市","岳阳市","株洲市","湘潭市"],
				["厦门市","福州市","漳州市","泉州市"]
			];
			function selectProvince(){
				var province = document.getElementById("province");	
				var value = province.value;
				var cities = provinces[value];
				var citySelect = document.getElementById("city");
				citySelect.options.length = 0;
				for (var i=0; i < cities.length; i++) {
					var cityText = cities[i]; 
					var option1 = document.createElement("option"); 
					var textNode = document.createTextNode(cityText) ;
					option1.appendChild(textNode); 
					citySelect.appendChild(option1);
				}
				
			}
			
		</script>
	</head>
	<body>
		<!--选择省份-->
		<select onchange="selectProvince()" id="province">
			<option value="-1">--请选择--</option>
			<option value="0">广东省</option>
			<option value="1">湖南省</option>
			<option value="2">福建省</option>
		</select>
		<!--选择城市-->
		<select id="city"></select>
	</body>
</html>