Ajax-省市區三級聯動

時間 2019-12-07

標籤 ajax 省市區三級聯動欄目 Ajax 简体版

原文原文鏈接

三級聯動：

此例在ThinkPHP3.2框架中實現php

1.建立數據

DROP TABLE IF EXISTS `region`;
CREATE TABLE `region` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT '地區編號',
  `parentid` int(11) NOT NULL COMMENT '上級id',
  `name` varchar(255) COLLATE utf8_unicode_ci NOT NULL COMMENT '名稱',
  PRIMARY KEY (`id`),
  KEY `district_upid_index` (`parentid`),
  KEY `district_name_index` (`name`)
) ENGINE=MyISAM AUTO_INCREMENT=91154 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

2.在view文件夾建立靜態頁面index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>省市區三級聯動</title>
    <style>
        select{
            width: 150px;
        }
    </style>
</head>
<body>
<!--省-->
<select name="provinceId" id="provinceId">
        <option>請選擇</option>
        <volist name="provinceList" id="province">
            <option value="{$province.id}">{$province.name}</option>
        </volist>
</select>
<!--市-->
<select name="cityId"  id="cityId">
        <option>請選擇</option>
</select>
<!--區-->
<select name="districtId"  id="districtId">
        <option>請選擇</option>
</select>
</body>
<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
<script>
    //省，市，區三級聯動(顯示市)
    $("#provinceId").change(function(){
        var provinceId=$(this).val();
        $.ajax({
            url:"{:U('Demo/regionAjaxGetCitys')}",
            Type:"POST",
            data:"provinceId="+provinceId,
            dataType:"json",
            success:function(data){
                var city = data.city;
                var option=$("<option></option>");
                $(option).val("0");
                $(option).html("請選擇");
                var option1=$("<option></option>");
                $(option1).val("0");
                $(option1).html("請選擇");
                $("#cityId").html(option);
                $("#districtId").html(option1);
                for(var i in city){
                    var option=$("<option></option>");
                    $(option).val(city[i]['id']);
                    $(option).html(city[i]['name']);
                    $("#cityId").append(option);
                }
            }
        });
    });
    //省，市，區三級聯動(顯示地區)
    $("#cityId").change(function(){
        var cityId=$(this).val();
        $.ajax({
            url:"{:U('Demo/regionAjaxGetdDistrict')}",
            Type:"POST",
            data:"cityId="+cityId,
            dataType:"json",
            success:function(data){
                var district = data.district;
                var option=$("<option></option>");
                $(option).val("0");
                $(option).html("請選擇");
                $("#districtId").html(option);
                for(var i in district){
                    var option=$("<option></option>");
                    $(option).val(district[i]['id']);
                    $(option).html(district[i]['name']);
                    $("#districtId").append(option);
                }
            }
        });
    });
</script>
</html>

3.建立控制器DemoController.class.php

<?php
namespace Home\Controller;
class DemoController extends BaseController
{
    /**
     *查詢
     */
    public function getList($where){
        $regionModel=D('Region');
        $list = $regionModel->where($where)->select();
        return $list;
    }
    /**
     *獲取省和直轄市
     */
    public function index(){
        $where['parentid'] = 0;
        $listprovince = $this->getList($where);
        $this->assign("provinceList",$listprovince);
        $this->display();
    }
    /**
     *省市區三級聯動ajax（獲取市）
     */
    public function regionAjaxGetCitys(){
        $where['parentid'] = I('provinceId');
        $list = $this->getList($where);
        $data=array('city'=>$list);
        header("Content-type: application/json");
        exit(json_encode($data));
    }
    /**
     *省市區三級聯動ajax(獲取地區)
     */
    public function regionAjaxGetdDistrict(){
        $where['parentid'] = I('cityId');
        $list = $this->getList($where);
        $data=array('district'=>$list);
        header("Content-type: application/json");
        exit(json_encode($data));
    }
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。