在做項目的時候，我們經常需要用到地址之類的省市區三級聯動的，今天就給大家分享一個非常簡潔的省市區三級聯動的代碼，基于jQuery，附上GIT地址，有需要的小伙伴可以直接拿走
省市級聯動，附使用示例和數據表數據
有部分數據精確到鄉鎮一級!!!
Git 地址：http://git.oschina.net/upliu/province-city-district
演示代碼：
- <!DOCTYPE html>
- <html>
- <head lang="en">
- <meta charset="UTF-8">
- <title>省市區三級聯動</title>
- </head>
- <body>
- <form method="post" action="post.php">
- <div id="area"></div>
- <input type="submit" style="margin-top: 10px;">
- </form>
- <script src="jquery-2.1.3.min.js"></script>
- <script src="area.js"></script>
- <script>
- $(function(){
- add_select(0);
- $('body').on('change', '#area select', function() {
- var $me = $(this);
- var $next = $me.next();
- /**
- * 如果下一級已經是當前所選地區的子地區，則不進行處理
- */
- if ($me.val() == $next.data('pid')) {
- return;
- }
- $me.nextAll().remove();
- add_select($me.val());
- });
- function add_select(pid) {
- var area_names = area['name'+pid];
- if (!area_names) {
- return false;
- }
- var area_codes = area['code'+pid];
- var $select = $('<select>');
- $select.attr('name', 'area[]');
- $select.data('pid', pid);
- if (area_codes[0] != -1) {
- area_names.unshift('請選擇');
- area_codes.unshift(-1);
- }
- for (var idx in area_codes) {
- var $option = $('<option>');
- $option.attr('value', area_codes[idx]);
- $option.text(area_names[idx]);
- $select.append($option);
- }
- $('#area').append($select);
- };
- });
- </script>
- </body>
- </html>
以上所述就是本文給大家分享的全部內容了，希望大家能夠喜歡。
新聞熱點
疑難解答
圖片精選
