Ajax-省市区三级联动

tomlingtm 发布于2019-08-20 18:28 / 2444人阅读

摘要：三级联动此例在框架中实现创建数据地区编号上级名称在文件夹创建静态页面省市区三级联动省请选择市请选择区请选择省，市，区三级联动显示市请选择请选择省，市，区三级联动显示地区请选择创建控制器查询获取

三级联动：

此例在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




    
    
    
    省市区三级联动

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

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));
    }
}

云服务器 GPU云服务器省市三级联动陕西 js省市县三级联动 ajax实现三级联动省市联动

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84552.html

Ajax-省市区三级联动

摘要：三级联动此例在框架中实现创建数据地区编号上级名称在文件夹创建静态页面省市区三级联动省请选择市请选择区请选择省，市，区三级联动显示市请选择请选择省，市，区三级联动显示地区请选择创建控制器查询获取三级联动：此例在ThinkPHP3.2框架中实现 1.创建数据 DROP TABLE IF EXISTS `region`; CREATE TABLE `region` ( `id` in...

jsummer 2019-07-01 14:19 评论0 收藏0
使用vue+element ui 实现省市区三级联动

摘要：使用实现省市区三级联动开发工具使用技术效果图如下话不多说上代码一，页面部分二，部分首先引入以下代码注意引入上方代码之前需先运行下方代码进行安装然后再写入以下代码这样一个省市区三级联动的下拉列表就完成了 ...

netScorpion 2021-11-11 16:54 评论0 收藏0
vue 省市区三级联动插件v-distpicker

摘要：十分便捷的三级联动插件官网步骤下载步骤使用与引入在中注册全局组件在文件中使用组件你需要用到三级联动的页面的里如何使用组件在该文件的部分写广东省广州市海珠区移动端步骤如何获取他们的数据给部分一个点击事件在配置十分便捷的三级联动插件官网：https://www.awesomes.cn/repo/... 步骤1：下载 npm install v-distpicker --save O...

learning 2019-08-23 18:02 评论0 收藏0
原生js实现省市区三级联动插件

原生js实现省市区三级联动插件前言插件功能只满足我司业务需求，如果希望有更多功能的，可在下方留言，我尽量扩展！如果你有需要或者喜欢的话，可以给我github来个star ? 仓库地址在线预览准备 // 页面上先引入css与js文件页面中的容器标签不限制，只需给个id就行 var address = new Address({ wrapId: wrap, showArr...

mumumu 2019-08-26 11:43 评论0 收藏0
小白成长日记：写个省市区三级联动

摘要：数据来源台湾缺省完成图初始化选完省之后部分请选择请选择暂无数据暂无数据一开始的初始状态是省份可以选择，利用来控制市和区的现实选项。当省份未选择时，市区因为没有数据，所以会选择暂无数据。依旧使用vue，不需要关注dom太方便了。数据来源（台湾缺省）：https://github.com/airyland/c... 完成图初始化 showImg(https://segmentfault...

JerryC 2019-08-21 17:51 评论0 收藏0