Ajax-省市区三级联动

三级联动：

此例在ThinkPHP3.2框架中实现

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')}",data:"cityId="+cityId,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));
    }
}

原文链接：https://www.f2er.com/ajax/160925.html

Ajax-省市区三级联动

三级联动：

1.创建数据

2.在view文件夹创建静态页面index.html

3.创建控制器DemoController.class.PHP

猜你在找的Ajax相关文章