<转>jquery+php+mysql实现Ajax省市县三级联动

今天闲来无事，随手写个jquery+php+mysql来实现的省市县的三级联动。这个功能不论是对学习还真实的项目开发都是很有用的，所以在此分享给大家，希望对广大朋友有所帮助！

点击源码下载  (百度网盘)，  站内下载（CSDN）

更多精彩内容： http://www.code4apk.com


我把大致思路说下吧，具体的我就不多说了。

1、第一步建立一个html页面的，放置省、市、县三个select选择框，代码如下：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="./js/jquery-1.8.3.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                //  加载所有的省份
                $.ajax({
                    type: "get",
                    url: "region_action.php", // type=1表示查询省份
                    data: {"parent_id": "1", "type": "1"},
                    dataType: "json",
                    success: function(data) {
                        $("#provinces").html("<option value=''>请选择省份</option>");
                        $.each(data, function(i, item) {
                            $("#provinces").append("<option value='" + item.region_id + "'>" + item.region_name + "</option>");
                        });
                    }
                });

                $("#provinces").change(function() {
                    $.ajax({
                        type: "get",
                        url: "region_action.php", // type =2表示查询市
                        data: {"parent_id": $(this).val(), "type": "2"},
                        dataType: "json",
                        success: function(data) {
                            $("#citys").html("<option value=''>请选择市</option>");
                            $.each(data, function(i, item) {
                                $("#citys").append("<option value='" + item.region_id + "'>" + item.region_name + "</option>");
                            });
                        }
                    });
                });

                $("#citys").change(function() {
                    $.ajax({
                        type: "get",
                        url: "region_action.php", // type =2表示查询市
                        data: {"parent_id": $(this).val(), "type": "3"},
                        dataType: "json",
                        success: function(data) {
                            $("#countys").html("<option value=''>请选择县</option>");
                            $.each(data, function(i, item) {
                                $("#countys").append("<option value='" + item.region_id + "'>" + item.region_name + "</option>");
                            });
                        }
                    });
                });
            });
        </script>
        
    </head>
    <body>
        <div>
            省份：
            <select id="provinces">
                <option value="">请选择省份</option>
            </select>
            市：
            <select id="citys">
                <option value="">请选择市</option>
            </select>
            县：
            <select id="countys">
                <option value="">请选择县</option>
            </select>
        </div>
    </body>
</html>


第二步：建立一个处理请求的PHP文件，如下：

<?php

require_once './Config/config.php';
require_once './plugins/DBHelper.php';

$type = isset($_GET["type"]) ? $_GET["type"] : "";
$parent_id = isset($_GET["parent_id"]) ? $_GET["parent_id"] : "";

// 链接数据库
if ($type == "" || $parent_id == "") {
    exit(json_encode(array("flag" => false, "msg" => "查询类型错误")));
} else {  
    // 链接数据库
    $db = new DBHelper("localhost", "root", "root", "region");
    $provinces = $db->getSomeResult("global_region", "region_id,region_name", "parent_id={$parent_id} and region_type={$type}");
    $provinces_json = json_encode($provinces);
    exit($provinces_json);
}

?>

第三步：其实这一步也是前提，就是要在mysql数据库中建一个地区表，此表结构简单，但是数据很多，大概3千多条，先列出表结构，具体数据请看代码附件。

CREATE TABLE `global_region` (
  `region_id` smallint(5) unsigned NOT NULL AUTO_INCREMENT,
  `parent_id` smallint(5) unsigned NOT NULL DEFAULT '0',
  `region_name` varchar(120) NOT NULL DEFAULT '',
  `region_type` tinyint(1) NOT NULL DEFAULT '2',
  PRIMARY KEY (`region_id`),
  KEY `parent_id` (`parent_id`),
  KEY `region_type` (`region_type`)
) ENGINE=MyISAM AUTO_INCREMENT=3409 DEFAULT CHARSET=utf8;


最终结果如下：



最后有点要说明就是，代码中用到一些jquey，php配置文件和php数据库链接类，并没有在文章中显示，请下载完整代码！

点击源码下载  (百度网盘)，  站内下载（CSDN）

更多精彩内容： http://www.code4apk.com

posted on 2015-10-23 21:56  hahahahahai12  阅读(282)  评论(0)    收藏  举报

导航