基於Jquery實現省份、城市、區縣三級連動

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

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

-//W3C//DTD HTML 4.01 Transitional//EN”
“;>

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

• 
  福建
  广东
  浙江
  江西
  
  




• 
  未选择
  
  



• 
  
  未选择
  
  

#效果如下：

主要是做了這個功能，相關程式碼都有些備註，淺顯易懂。如果你要使用可以直接繼續增加省份、城市的數據，或是改改採用ajax取得數據，有不懂的程式碼可以留言或聯絡我。

以上是基於Jquery實現省份、城市、區縣三級連動的詳細內容。更多資訊請關注PHP中文網其他相關文章！