碼上快樂

相關內容    簡體    繁體

jquery+php+mysql實現Ajax省市縣三級聯動

本文轉載自   查看原文   2017-01-04 11:20   3861 

1、第一步建立一個html頁面的，放置省、市、縣三個select選擇框，代碼如下：

[html] view plain copy 在CODE上查看代碼片派生到我的代碼片
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <title></title>  
  5.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  6.         <script src="./js/jquery-1.8.3.min.js" type="text/javascript"></script>  
  7.         <script type="text/javascript">  
  8.             $(document).ready(function() {  
  9.                 //  加載所有的省份  
  10.                 $.ajax({  
  11.                     type: "get",  
  12.                     url: "region_action.php", // type=1表示查詢省份  
  13.                     data: {"parent_id": "1", "type": "1"},  
  14.                     dataType: "json",  
  15.                     success: function(data) {  
  16.                         $("#provinces").html("<option value=''>請選擇省份</option>");  
  17.                         $.each(data, function(i, item) {  
  18.                             $("#provinces").append("<option value='" + item.region_id + "'>" + item.region_name + "</option>");  
  19.                         });  
  20.                     }  
  21.                 });  
  22.   
  23.                 $("#provinces").change(function() {  
  24.                     $.ajax({  
  25.                         type: "get",  
  26.                         url: "region_action.php", // type =2表示查詢市  
  27.                         data: {"parent_id": $(this).val(), "type": "2"},  
  28.                         dataType: "json",  
  29.                         success: function(data) {  
  30.                             $("#citys").html("<option value=''>請選擇市</option>");  
  31.                             $.each(data, function(i, item) {  
  32.                                 $("#citys").append("<option value='" + item.region_id + "'>" + item.region_name + "</option>");  
  33.                             });  
  34.                         }  
  35.                     });  
  36.                 });  
  37.   
  38.                 $("#citys").change(function() {  
  39.                     $.ajax({  
  40.                         type: "get",  
  41.                         url: "region_action.php", // type =2表示查詢市  
  42.                         data: {"parent_id": $(this).val(), "type": "3"},  
  43.                         dataType: "json",  
  44.                         success: function(data) {  
  45.                             $("#countys").html("<option value=''>請選擇縣</option>");  
  46.                             $.each(data, function(i, item) {  
  47.                                 $("#countys").append("<option value='" + item.region_id + "'>" + item.region_name + "</option>");  
  48.                             });  
  49.                         }  
  50.                     });  
  51.                 });  
  52.             });  
  53.         </script>  
  54.           
  55.     </head>  
  56.     <body>  
  57.         <div>  
  58.             省份：  
  59.             <select id="provinces">  
  60.                 <option value="">請選擇省份</option>  
  61.             </select>  
  62.             市：  
  63.             <select id="citys">  
  64.                 <option value="">請選擇市</option>  
  65.             </select>  
  66.             縣：  
  67.             <select id="countys">  
  68.                 <option value="">請選擇縣</option>  
  69.             </select>  
  70.         </div>  
  71.     </body>  
  72. </html>  


第二步：建立一個處理請求的PHP文件，如下：

[php] view plain copy 在CODE上查看代碼片派生到我的代碼片
  1. <?php  
  2.   
  3. //封裝的數據操作類
  4. require_once './Config/config.php';  
  5. require_once './plugins/DBHelper.php';  
  6.   
  7. $type = isset($_GET["type"]) ? $_GET["type"] : "";  
  8. $parent_id = isset($_GET["parent_id"]) ? $_GET["parent_id"] : "";  
  9.   
  10. // 鏈接數據庫代碼（沒有源文件，直接寫個鏈接數據的代碼根據條件去查地區表就可以了）  
  11. if ($type == "" || $parent_id == "") {  
  12.     exit(json_encode(array("flag" => false, "msg" => "查詢類型錯誤")));  
  13. } else {    
  14.     // 鏈接數據庫  
  15.     $db = new DBHelper("localhost", "root", "root", "region");  
  16.     $provinces = $db->getSomeResult("global_region", "region_id,region_name", "parent_id={$parent_id} and region_type={$type}");  
  17.     $provinces_json = json_encode($provinces);  
  18.     exit($provinces_json);  
  19. }  
  20.   
  21. ?>  

第三步：其實這一步也是前提，就是要在mysql數據庫中建一個地區表，此表結構簡單，但是數據很多，大概3千多條，先列出表結構，具體數據請看代碼附件。

[sql] view plain copy 在CODE上查看代碼片派生到我的代碼片
  1. CREATE TABLE `global_region` (  
  2.   `region_id` smallint(5) unsigned NOT NULL AUTO_INCREMENT,  
  3.   `parent_id` smallint(5) unsigned NOT NULL DEFAULT '0',  
  4.   `region_name` varchar(120) NOT NULL DEFAULT '',  
  5.   `region_type` tinyint(1) NOT NULL DEFAULT '2',  
  6.   PRIMARY KEY (`region_id`),  
  7.   KEY `parent_id` (`parent_id`),  
  8.   KEY `region_type` (`region_type`)  
  9. ) ENGINE=MyISAM AUTO_INCREMENT=3409 DEFAULT CHARSET=utf8;  


最終結果如下：



 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 ajax省市縣三級聯動 javascript實現全國省市縣三級聯動 layui的省市縣三級聯動 Ajax無刷新技術實現省市縣三級聯動下拉菜單--Asp.Net 利用jquery和ajax實現省市區的三級聯動 中國省市縣數據，三級聯動 Python實現用戶交互，顯示省市縣三級聯動的選擇 ionic+AnjularJs實現省市縣三級聯動效果 Struts2+jQuery+ajax+mySql實現省市二級聯動 基於ThinkPHP+AJAX的省市區三級聯動
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM