js+Ajax学习——select的省市级联

最新推荐文章于 2022-03-22 20:27:56 发布

我还没秃我还能学！

最新推荐文章于 2022-03-22 20:27:56 发布

阅读量125

点赞数

分类专栏：前端 ajax 笔记

本文链接：https://blog.youkuaiyun.com/weixin_43068329/article/details/100667770

版权

笔记同时被 3 个专栏收录

16 篇文章

订阅专栏

前端

7 篇文章

订阅专栏

ajax

5 篇文章

订阅专栏

本文介绍了如何使用JavaScript和Ajax技术实现网页上的省市区级联选择效果，通过动态加载数据，提升用户体验。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>onchange事件</title>
		<script>
            //封装document.getElemenyById();
            function $(id) {
	            return document.getElementById(id);
            }
        </script>
	</head>
	<body>
		<script>
			//sel改变时发生的操作
			function bian(){
				//1声明二维数组
				var city=[
					["哈尔滨","齐齐哈尔","牡丹江"],
					["长春","吉林","四平"],
					["沈阳","丹东","大连"]
				];
				//2获取sel的值
				var value=$("sel").value;
				if(value==-1){
					var html="<option>请先选择省份</option>"
					$("sel_city").innerHTML=html;
				}else{
					var Acity=city[value];
					//循环遍历city数组，拼option字符串
					
					var htmlcity="";
					for (var i=0;i<city.length;i++) {
						htmlcity+="<option>";
						htmlcity+=Acity[i];
						htmlcity+="</option>";
					}
					//拼好的字符串放sel_city里
					$("sel_city").innerHTML=htmlcity;
				}
			}
		</script>
		<select id="sel" onchange="bian()">
			<option value="-1">请选择省份</option>
			<option value="0">黑龙江</option>
			<option value="1">吉林</option>
			<option value="2">辽宁</option>
		</select>
		<select id="sel_city"></select>
	</body>
</html>