JavaScript----下拉框二级联动效果

最新推荐文章于 2021-03-20 14:11:01 发布

一心不安

最新推荐文章于 2021-03-20 14:11:01 发布

阅读量269

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/qq_42700595/article/details/83443917

JavaScript 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的省市区联动下拉框功能，通过监听省份选择的变化来动态更新对应的城市选项。该功能适用于需要用户选择地理位置的表单场景。

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

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script language="JavaScript">
function getcity(element){
var pro=element.value;
var city = document.getElementById("city");
switch (pro){
case "请选择省份":
city.length=0;
city.appendChild(new Option("请选择城市"));
break;
case "河南省":
city.length=0;
city.appendChild(new Option("濮阳市","py"));
city.appendChild(new Option("郑州市","zz"));
city.appendChild(new Option("鹤壁市","hb"));
break;
case "湖北省":
city.length=0;
city.appendChild(new Option("武汉","wh"));
city.appendChild(new Option("武昌","wc"));
break;
case "广东省":
city.length=0;
city.appendChild(new Option("惠州市","hz"));
city.appendChild(new Option("深圳市","sz"));
city.appendChild(new Option("东莞市","dg"));
break;
}
}
</script>
</head>
<body>
<select onchange="getcity(this)">
<option>请选择省份</option>
<option>河南省</option>
<option>湖北省</option>
<option>广东省</option>
</select>
<select id="city">
<option>请选择城市</option>
</select>
</body>
</html>