这篇文章主要介绍“怎么用JS实现简单的省市联动”，在日常操作中，相信很多人在怎么用JS实现简单的省市联动问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么用JS实现简单的省市联动”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
技术分析：
使用 javascript 实现城市二级联动（onchange() 当下拉框变化时触发事件 createTextNode() 方法和 createElement() 方法以及 appendChild() 方法）。
代码步骤：
首先确定事件为 onchange() 事件,并为该事件绑定一个函数。书写该函数。
创建一个二维数组。
在判断用户选择的是哪一个省份。
获取该省份下的城市。
创建文本节点和元素节点，将文本节点添加到元素节点中。
获取第二个下拉框元素并把元素节点添加到第二个下拉框中。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实现简单的省市联动”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！
