您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要介绍“怎么用JS实现简单的省市联动”，在日常操作中，相信很多人在怎么用JS实现简单的省市联动问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么用JS实现简单的省市联动”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
使用 javascript 实现城市二级联动（onchange() 当下拉框变化时触发事件 createTextNode() 方法和 createElement() 方法以及 appendChild() 方法）。
1、首先确定事件为 onchange() 事件,并为该事件绑定一个函数。书写该函数。
2、创建一个二维数组。
3、在判断用户选择的是哪一个省份。
4、获取该省份下的城市。
5、创建文本节点和元素节点，将文本节点添加到元素节点中。
6、获取第二个下拉框元素并把元素节点添加到第二个下拉框中。7、清除第二个下拉框（如果不清除，就会有上一次的遗留）。效
源代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>省市联动</title>
</head>
<body>
<!--省份的下拉框-->
<select name="province" id="province" onchange="changeCity()"> <!--使用改变下拉框onchange实现-->
<option value="0">请选择</option>
<option value="1">湖北省</option>
<option value="2">湖南省</option>
<option value="3">广东省</option>
</select>
<!--城市的下拉框-->
<select name="city" id="city">
<option value="0">请选择</option>
</select>
<script>
// 创建一个二维的数组，用来存储各个省份对应的城市
var cities = new Array();
cities[0] = new Array("武汉市","黄冈市","荆州市","仙桃市","黄石市","宜昌市");
cities[1] = new Array("长沙市","湘潭市","株洲市","衡阳市","岳阳市","郴州市");
cities[2] = new Array("广州市","珠海市","深圳市","东莞市","佛山市","茂名市");
function changeCity() {
// 获取省份的下拉框
var pro = document.getElementById("province");
// 获取城市下拉框
var city = document.getElementById("city");
// 获取你点击的省的value
var val = pro.value;
val = val - 1;
// 清空城市下拉框里面的城市
city.options.length = 1; //因为每次选新的省份，上次选的省份的城市也会出现，所以新添之前清空即可
// 遍历所有城市
for(var i=0;i<cities.length;i++){
// 匹配省份对应的城市
if(val == i){
// 遍历用户选择的省份的城市 <option value="3">广东省</option>这个里面的文本内容就称为文本节点。
for(var j=0;j<cities[i].length;j++){
// 创建城市的文本节点
var text = document.createTextNode(cities[i][j]);
// 创建元素节点
var opt = document.createElement("option");
// 将城市的文本节点添加到option元素节点里面
opt.appendChild(text) ; //在option标签里添加一个子节点，子节点里放文本
// 将添加了文本内容的option标签放在上面城市下拉框里面
city.appendChild(opt); //在城市下拉框里添加子节点，里面放option标签
}
}
}
}
</script>
</body>
</html>到此，关于“怎么用JS实现简单的省市联动”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。