省市二级联动
2021/5/16 10:25:40
本文主要是介绍省市二级联动,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
话不多说,直接上代码。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script src="js/jquery-3.2.1.js"></script> </head> <body> <select name="" id="selProvince"> <option value="">--请选择--</option> </select> <select name="" id="selCity"> <option value="">--请选择--</option> </select> <script> var iNum1; var iNum2; var aProvince = ['湖北', '湖南', '广东']; var aCity = [ ['武汉', '襄阳', '荆州'], ['长沙', '株洲', '湘潭'], ['广州', '深圳', '东莞'] ]; $(function () { for (var i=0;i<aProvince.length;i++) { $("#selProvince").append('<option>'+ aProvince[i] + '</option>'); }; /*当元素的值发生改变时,会发生 change 事件*/ $("#selProvince").change(function(){ /*':eq'匹配一个给定索引值的元素*/ $('#selCity').children().not(':eq(0)').remove(); iNum1 = $(this).children("option:selected").index(); var aaCity = aCity[iNum1-1]; for(var j = 0;j<aaCity.length;j++){ $('#selCity').append('<option>'+ aaCity[j] + '</option>'); } }); });
这篇关于省市二级联动的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-23Springboot应用的多环境打包入门
- 2024-11-23Springboot应用的生产发布入门教程
- 2024-11-23Python编程入门指南
- 2024-11-23Java创业入门:从零开始的编程之旅
- 2024-11-23Java创业入门:新手必读的Java编程与创业指南
- 2024-11-23Java对接阿里云智能语音服务入门详解
- 2024-11-23Java对接阿里云智能语音服务入门教程
- 2024-11-23JAVA对接阿里云智能语音服务入门教程
- 2024-11-23Java副业入门:初学者的简单教程
- 2024-11-23JAVA副业入门:初学者的实战指南