脚本宝典收集整理的这篇文章主要介绍了js实例教程-JQuery代码实现省市联动，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
本文描述JQ方式实现省市联动
用到的知识点：JQ文档操作方法
append()在元素后面添加内容
appendTo()把元素移动到指定的元素中
遍历
方式一：.each(数组，function(i，n)),其中i为下标，n表示下标对应的数组[i]的值
方式二：.each(数组，function(i，n)),其中i为下标，n表示下标对应的数组[i]的值
方式三：(数组).each(function(j,m){});其中j和m可以不写如果不需要显示出来m的值。如果需要显示出来的话是需要写的。
1-需要做一个html页面 包括省份和城市的如下：
省份：<select id="provence"> <option value="0" name="provence">河南省</option> <option value="1" name="provence">安徽省</option> <option value="2" name="provence">江苏省</option> <option value="3" name="provence">河北省</option> </select> 城市：<select id="city"> <option value="0" name="city">请选择</option> </select>
2-需要准备一个二维数组盛放城市
// 利用二维数组来表示城市，注意对应关系 var cities = [ ["商丘市","鹿邑县","许昌市","开封市","郑州市"], ["合肥市","淮南市","马鞍山市","六安市","亳州市"], ["南京市","苏州市","扬州市"], ["沧州市","泊头市","天津市"] ];
3-需要引入js
采用cdn方式
<script src="https://libs.baidu.com/jquery/1.3.2/jquery.min.js"></script>
4-写JS用到两次遍历。
首先需要获得省份的对象和城市的对象，其中省份的对象需要监听改变时间，JS原生的是onChange属性，JQ是把on都去掉了而且变成了方法。$("#provence").change(funciton(){
通过这个可以把html对应的value下标取到，可以对应到二维数组的下标（这个是刻意设计的需要注意）
$(function(){//入口函数 //获得城市对象的下拉框 var $city = $("#city"); // 利用二维数组来表示城市，注意对应关系 var cities = [ ["商丘市","鹿邑县","许昌市","开封市","郑州市"], ["合肥市","淮南市","马鞍山市","六安市","亳州市"], ["南京市","苏州市","扬州市"], ["沧州市","泊头市","天津市"] ]; //获得省份的对象 $("#provence").change(function(){ $city.get(0).length = 0; var val = this.value; $.each(cities, function(i,n) { if (val == i ) { $(n).each(function(j,m){ //创建对象，并且添加到城市下拉框中 $city.append("<option name='city'>"+m+"</option>") }); } }); }); }); 省市联动主要考察遍历数组和添加到元素中，其中有个地方需要注意那就是在添加元素之前需要把城市节点的元素先清除，有两个方式一个是采用JS原生的方式，把元素的长度置为1（这是因为城市中还有一个“请选择“的节点原因。）方式二：通过JQ对象的each方法把值都置为空。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://libs.baidu.com/jquery/1.3.2/jquery.min.js"></script> <script> $(function(){//入口函数 //获得城市对象的下拉框 var $city = $("#city"); // 利用二维数组来表示城市，注意对应关系 var cities = [ ["商丘市","鹿邑县","许昌市","开封市","郑州市"], ["合肥市","淮南市","马鞍山市","六安市","亳州市"], ["南京市","苏州市","扬州市"], ["沧州市","泊头市","天津市"] ]; //获得省份的对象 $("#provence").change(function(){ $city.get(0).length = 1; //方式一：采用原生的方式把长度置为1； // $city.each(function(i,n){ 这种方式不可行，好像i一直都是0，目前还不知道为何原因 // alert(i); // n = null; // }); var val = this.value; $.each(cities, function(i,n) { if (val == i ) { $(n).each(function(j,m){ //创建对象，并且添加到城市下拉框中 $city.append("<option name='city'>"+m+"</option>") }); } }); }); }); </script> </head> <body> <!-- 作者：伦哥哥 时间：2018-04-22 描述：1.生成两个下拉框 省份下拉框 城市下拉框 --> 省份：<select id="provence"> <option value="0" name="provence">河南省</option> <option value="1" name="provence">安徽省</option> <option value="2" name="provence">江苏省</option> <option value="3" name="provence">河北省</option> </select> 城市：<select id="city"> <option value="0" name="city">请选择</option> </select> </body> </html> 至于方式二为何不可以，目前还不能够解决
本文描述JQ方式实现省市联动
用到的知识点：JQ文档操作方法
append()在元素后面添加内容
appendTo()把元素移动到指定的元素中
遍历
方式一：.each(数组，function(i，n)),其中i为下标，n表示下标对应的数组[i]的值
方式二：.each(数组，function(i，n)),其中i为下标，n表示下标对应的数组[i]的值
方式三：(数组).each(function(j,m){});其中j和m可以不写如果不需要显示出来m的值。如果需要显示出来的话是需要写的。
1-需要做一个html页面 包括省份和城市的如下：
省份：<select id="provence"> <option value="0" name="provence">河南省</option> <option value="1" name="provence">安徽省</option> <option value="2" name="provence">江苏省</option> <option value="3" name="provence">河北省</option> </select> 城市：<select id="city"> <option value="0" name="city">请选择</option> </select>
2-需要准备一个二维数组盛放城市
// 利用二维数组来表示城市，注意对应关系 var cities = [ ["商丘市","鹿邑县","许昌市","开封市","郑州市"], ["合肥市","淮南市","马鞍山市","六安市","亳州市"], ["南京市","苏州市","扬州市"], ["沧州市","泊头市","天津市"] ];
3-需要引入js
采用cdn方式
<script src="https://libs.baidu.com/jquery/1.3.2/jquery.min.js"></script>
4-写JS用到两次遍历。
首先需要获得省份的对象和城市的对象，其中省份的对象需要监听改变时间，JS原生的是onChange属性，JQ是把on都去掉了而且变成了方法。$("#provence").change(funciton(){
通过这个可以把html对应的value下标取到，可以对应到二维数组的下标（这个是刻意设计的需要注意）
$(function(){//入口函数 //获得城市对象的下拉框 var $city = $("#city"); // 利用二维数组来表示城市，注意对应关系 var cities = [ ["商丘市","鹿邑县","许昌市","开封市","郑州市"], ["合肥市","淮南市","马鞍山市","六安市","亳州市"], ["南京市","苏州市","扬州市"], ["沧州市","泊头市","天津市"] ]; //获得省份的对象 $("#provence").change(function(){ $city.get(0).length = 0; var val = this.value; $.each(cities, function(i,n) { if (val == i ) { $(n).each(function(j,m){ //创建对象，并且添加到城市下拉框中 $city.append("<option name='city'>"+m+"</option>") }); } }); }); }); 省市联动主要考察遍历数组和添加到元素中，其中有个地方需要注意那就是在添加元素之前需要把城市节点的元素先清除，有两个方式一个是采用JS原生的方式，把元素的长度置为1（这是因为城市中还有一个“请选择“的节点原因。）方式二：通过JQ对象的each方法把值都置为空。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://libs.baidu.com/jquery/1.3.2/jquery.min.js"></script> <script> $(function(){//入口函数 //获得城市对象的下拉框 var $city = $("#city"); // 利用二维数组来表示城市，注意对应关系 var cities = [ ["商丘市","鹿邑县","许昌市","开封市","郑州市"], ["合肥市","淮南市","马鞍山市","六安市","亳州市"], ["南京市","苏州市","扬州市"], ["沧州市","泊头市","天津市"] ]; //获得省份的对象 $("#provence").change(function(){ $city.get(0).length = 1; //方式一：采用原生的方式把长度置为1； // $city.each(function(i,n){ 这种方式不可行，好像i一直都是0，目前还不知道为何原因 // alert(i); // n = null; // }); var val = this.value; $.each(cities, function(i,n) { if (val == i ) { $(n).each(function(j,m){ //创建对象，并且添加到城市下拉框中 $city.append("<option name='city'>"+m+"</option>") }); } }); }); }); </script> </head> <body> <!-- 作者：伦哥哥 时间：2018-04-22 描述：1.生成两个下拉框 省份下拉框 城市下拉框 --> 省份：<select id="provence"> <option value="0" name="provence">河南省</option> <option value="1" name="provence">安徽省</option> <option value="2" name="provence">江苏省</option> <option value="3" name="provence">河北省</option> </select> 城市：<select id="city"> <option value="0" name="city">请选择</option> </select> </body> </html> 至于方式二为何不可以，目前还不能够解决
觉得可用，就经常来吧！Javascript技巧 脚本宝典 欢迎评论哦！ js技巧，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的js实例教程-JQuery代码实现省市联动全部内容，希望文章能够帮你解决js实例教程-JQuery代码实现省市联动所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。