jQuery实现三级城市联动
来源:互联网 发布:淘宝详情页面尺寸 编辑:程序博客网 时间:2024/05/11 15:31
<div id="all"> <select id="save"></select><!-- 省级 --> <select id="city"></select><!-- 市级 --> <select id="area"></select><!-- 区级 --></div>
<style> select{ width: 100px; } div{ width: 500px; height: 300px; margin:150px auto; }</style>
<script type="text/javascript"> var arr=new Array(); //一级目录数据 var arr1=new Array("北京市","上海市","安徽省","江苏省","江浙省","山东省"); //二级目录数据 var arr2 = new Array(); arr[0]="东城,西城,崇文,宣武,朝阳,丰台,石景山,海淀,门头沟,房山,通州,顺义,昌平,大兴,平谷,怀柔,密云,延庆"; arr[1]="黄浦,卢湾,徐汇,长宁,静安,普陀,闸北,虹口,杨浦,闵行,宝山,嘉定,浦东,金山,松江,青浦,南汇,奉贤,崇明"; arr[2]="合肥,芜湖,蚌埠,马鞍山,淮北,铜陵,安庆,黄山,滁州,宿州,池州,淮南,巢湖,阜阳,六安,宣城,亳州"; arr[3]="南京市,苏州市,徐州,扬州,镇江"; arr[4]="杭州市,宁波市,金华,温州"; arr[5]="济南,日照,青岛,烟台"; //三级目录数据 var arr3=new Array(); arr3[0]=new Array(); arr3[0][0]="东城";//第一个为省 第二个为区 arr3[0][1]="西城"; arr3[0][2]="崇文"; arr3[0][3]="崇文"; arr3[1]=new Array(); arr3[1][0]="黄浦"; arr3[1][1]="卢湾"; arr3[2]=new Array(); arr3[2][0]="蜀山区,高新区,政务区,瑶海区,包河区"; arr3[2][1]="芜湖,镜湖区,无为"; $(function(){ first(); $("#save").change(function(){ second(); }) $("#city").change(function(){ third(); }); }); function first(){ var ff =""; for(var i=0; i<arr1.length; i++){ ff = ff +'<option value="'+i+'">'+arr1[i]+'</option>'; } $("#save").append(ff); second(); } function second(){ $("#city").empty(); var n=$("#save").val(); var Arr2=arr[n].split(','); var se = ""; for(var i=0; i<Arr2.length; i++){ se = se+'<option value="'+i+'">'+Arr2[i]+'</option>'; } $("#city").append(se); third(); } function third(){ $("#area").empty(); var c = $("#city").val(); var n=$("#save").val(); var Arr3=arr3[n][c].split(','); var th = ""; for(var i=0; i<Arr3.length; i++){ th = th+'<option value="'+i+'">'+Arr3[i]+'</option>' } $("#area").append(th); } </script>
阅读全文
0 0
- jQuery实现三级城市联动
- Jquery 城市三级联动 插件
- Jquery实现城市三级数据联动的实例
- jquery实现城市三级数据联动的实例
- 基于Jquery实现省份、城市、区县三级联动
- 城市三级联动功能实现
- jquery选择城市、县、区三级联动
- jQuery表单省市区城市三级联动
- 原生JS实现的城市三级联动
- js实现城市列表的三级联动
- 【JQuery】使用JQuery实现城市两级或三级联动(下拉菜单)
- Jquery+XML实现三级联动
- Jquery实现Checkbox三级联动
- Jquery实现ajax三级联动
- jquery实现省市区三级联动
- jQuery实现select三级联动
- jquery实现三级联动效果
- 用jquery实现三级联动
- HDU-1059 Dividing (多重背包 二进制优化+剪枝)
- 水仙花数
- 编写 USB 存储设备使用痕迹检测和删除工具
- TensorFlow模型文件保存和读取
- unity3d 判断是否安装指定app android and ios
- jQuery实现三级城市联动
- hdu 5414 CRB and String||QDUOJ GZS and String
- C++浮点型变量的存储方式
- caffe 保存日志的方法
- PHP数据类型
- 多层感知机实现mnist手写数字识别
- Spring入门笔记(一)---入门配置
- Android类似电商类的多级选择
- 创建抽象类