>  기사  >  웹 프론트엔드  >  Jquery를 기반으로 도, 시, 구, 군의 3단계 연계 구현

Jquery를 기반으로 도, 시, 구, 군의 3단계 연계 구현

巴扎黑
巴扎黑원래의
2017-06-26 14:24:501469검색

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

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

“;>




<script><br>$(document).ready(function(){<br>//省份城市数组<br>var fujian_city = new Array(‘福州’,’漳州’,’厦门’,’龙岩’,’泉州’,’南平’,’莆田’,’宁德’,’三明’);<br>var guangdong_city = new Array(‘广州’,’深圳’,’东莞’,’潮州’,’河源’,’汕头’,’珠海’,’佛山’,’肇庆’,’韶关’);</p> <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=”未选择”>未选择</option>’);<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]+'</option>’;<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=”未选择”>未选择</option>’);<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]+'</option>’;<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>














효과는 다음과 같습니다.

주로 이 함수에 대한 관련 코드에 몇 가지 메모가 있어 이해하기 쉽습니다. 사용하고 싶으시면 계속해서 시/도 데이터를 직접 추가하셔도 되고, 코드가 이해가 안 되시면 메시지를 남기시거나 연락주시면 됩니다.

위 내용은 Jquery를 기반으로 도, 시, 구, 군의 3단계 연계 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.