基于Jquery实现省份、城市、区县三级联动-js教程-PHP中文网

基于Jquery实现省份、城市、区县三级联动

巴扎黑

发布： 2017-06-26 14:24:50

原创

1619人浏览过

前端感觉写的比较少，也是为了练手，下午没事用来写了这个三级联动，也是第一次写这东西。

据我了解，城市信息可以选择存在数据库或者直接写在前端，为了省事，我直接写在前端，下面是我的代码：

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”“;><html><head><title></title><script src=”;></script><script>$(document).ready(function(){//省份城市数组var fujian_city = new Array(‘福州’,’漳州’,’厦门’,’龙岩’,’泉州’,’南平’,’莆田’,’宁德’,’三明’);var guangdong_city = new Array(‘广州’,’深圳’,’东莞’,’潮州’,’河源’,’汕头’,’珠海’,’佛山’,’肇庆’,’韶关’);//城市下属区县数组var fuzhou_county = new Array(‘鼓楼区’,’台江区’,’平潭’,’晋安区’,’马尾区’,’福清市’,’长乐市’,’闽侯县’,’连江县’,’闽清县’);var zhangzhou_county = new Array(‘芗城区’,’龙文区’,’南靖县’,’平和县’,’龙海市’,’东山县’,’华安县’);var xiamen_county = new Array(‘湖里区’,’思明区’,’海沧区’,’集美区’,’同安县’,’翔安区’);//获取省份改变的事件，并设置被选择省份城市信息$(“#province”).change(function(){//清空每次选择留下的城市信息$(“#city”).find(“option”).remove();//设置未选择的城市默认状态$(“#city”).append(‘<option value=”未选择”>未选择</option>’);//获取被选中省份的值var province=$(“#province”).val();//设置城市的自定义函数$.extend({set_cities:function(province){var arr_length = province.length;for(var i=1;i<=arr_length;i++){var place_info = ‘<option value=’+province[i-1]+’>’+province[i-1]+'</option>’;$(“#city”).append(place_info);}}});switch(province){case ‘福建’:$.set_cities(fujian_city);break;case ‘广东’:$.set_cities( guangdong_city);break;default :alert(‘没有写信息的省份，这里只展示福建和广东两个省份’);}})//获取改变城市的事件，并设置区县信息，这里只写了福建的福州、漳州、厦门的部分城市信息$(“#city”).change(function(){//清空每次选择留下的区县信息$(“#county”).find(“option”).remove();//设置未选择的区县默认状态$(“#county”).append(‘<option value=”未选择”>未选择</option>’);//获取被选中城市的值var city=$(“#city “).val();//设置区县的自定义函数$.extend({set_counties:function(city){var arr_length = city.length;for(var i=1;i<=arr_length;i++){var place_info = ‘<option value=’+city[i-1]+’>’+city[i-1]+'</option>’;$(“#county”).append(place_info);}}});switch(city){case ‘福州’:$.set_counties(fuzhou_county);break;case ‘厦门’:$.set_counties( xiamen_county);break;case ‘漳州’:$.set_counties( zhangzhou_county);break;default :alert(‘这里只写了福建的福州、漳州、厦门的部分城市信息’);}})});</script></head><body><div><ul><li><select name=”province” id=”province”><option value=”福建”>福建</option><option value=”广东”>广东</option><option value=”浙江”>浙江</option><option value=”江西”>江西</option></select></li><li><select name=”city” id=”city”><option value=”0″>未选择</option></select></li><li><select name=”county” id=”county”><option value=”0″>未选择</option></select></li></ul></div></body></html>

效果如下：