宿迁腾云网络网站建设公司

腾云网络 八年经验专注网站建设
  • 首页
  • 服务项目
    • 网站建设
    • 微信小程序
    • APP开发
    • SEO优化
  • 建站费用
  • 成功案例
    • 网站建设案例
    • 小程序案例
    • APP开发案例
    • SEO优化案例
  • 行业动态
    • 网站建设
    • SEO优化
    • 技术日志
  • 联系我们
    • 关于我们
首页 > 行业动态 > 技术日志 > PHP thinkphp5 + layui 实现四级联动

PHP thinkphp5 + layui 实现四级联动

2020-05-18

  <div class="layui-form-item layui-form-pane">
        <label class="layui-form-label">城市联动</label>
        <div class="layui-input-inline" >
            <select name="province" lay-verify="required" lay-search="" lay-skin="select" lay-filter="province" >
                <option value="">请选择省</option>
               <foreach name="arealist" item="v">
                   <option value="{$v.id}">{$v.area_name}</option>
               </foreach>
            </select>
        </div>
        <div class="layui-input-inline" >
            <select name="city" lay-verify="required" lay-search="" lay-skin="select" lay-filter="city" id="city">
                <option value="">请选择市/县</option>
            </select>
        </div>
        <div class="layui-input-inline" >
            <select name="area" lay-verify="required" lay-search=""lay-skin="select" lay-filter="area" id="area">
                <option value="">请选择镇区</option>
            </select>
        </div>
            <div class="layui-input-inline" >
            <select name="area" lay-verify="required" lay-search=""lay-skin="select" lay-filter="street" id="street">
                <option value="">请选择街道</option>
            </select>
        </div>
    </div>

html 部分

<script>
    layui.use(['form', 'layedit', 'laydate'],
    function() {
        var $ = layui.jquery,
        form = layui.form,
        layer = layui.layer,
        layedit = layui.layedit,
        laydate = layui.laydate;
 
        //监听省份选择
        form.on('select(province)',
        function(data) {
            $('#city').html('<option value="">请选择市/县</option>');
            $('#area').html('<option value="">请选择镇区</option>');
            $('#street').html('<option value="">请选择街道</option>');
            $.ajax({
                url: "{:U('Admin/getchildarea')}",
                data: {
                    parent_id: data.value
                },
                type: 'POST',
                dataType: 'json',
                success: function(data1) {
                    if (data1.error == 0) {
                        $("#city").append(data1.option);
                        form.render('select'); //刷新select选择框渲染
                    }
                }
            });
        });
        form.on('select(city)',
        function(data) {
            $('#area').html('<option value="">请选择镇区</option>');
            $('#street').html('<option value="">请选择街道</option>');
            $.ajax({
                url: "{:U('Admin/getchildarea')}",
                data: {
                    parent_id: data.value
                },
                type: 'POST',
                dataType: 'json',
                success: function(data1) {
                    if (data1.error == 0) {
                        $("#area").append(data1.option);
                        form.render('select'); //刷新select选择框渲染
                    }
                }
            });
        });
        //监听省份选择
        form.on('select(area)',
        function(data) {
            $('#street').html('<option value="">请选择街道</option>');
            $.ajax({
                url: "{:U('Admin/getchildarea')}",
                data: {
                    parent_id: data.value
                },
                type: 'POST',
                dataType: 'json',
                success: function(data1) {
                    if (data1.error == 0) {
                        $("#street").append(data1.option);
                        form.render('select'); //刷新select选择框渲染
                    }
                }
            });
        });
 
        //监听提交
        form.on('submit(demo1)',
        function(data) {
            layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            }) return false;
        });
 
    });
</script>

js部分

     public function loudong() {
        $ld_id= input('post.parent_id');
        $where['district_id'] = $ld_id;
        $area = db('表名')->field('id, name')->where($where)->select();
        if ($area) {
            $option = '<option value=""></option>';
            foreach ($area as $key => $value) {
                $option .= '<option   value="'.$value['id'].'">'.$value['name'].'</option>';
 
            }
            echo json_encode(array('error' => 0, 'option' => $option));
        } else {
            echo json_encode(array('error' => 1));
        }
 
    }

PHP部分

可以实现无限级分类~

Tag:
网站制作公众号

宿迁腾云网络网站建设公司 | 网站开发 | 网站制作 | 网站优化

咨询电话:13160355545

上一篇

返回栏目

下一篇

免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。

热推

  • php 分享到微信代码PHP初级开发工程师1.比较全面的学习流程,你知道吗? 分享到微信朋友圈 代码
  • php高级程序设计:模式、框架与测试如何搭建架构师知识体系:我是谁、我在哪里?php框架设计
  • 编程让曾经迷茫的我发现了一个奇妙世界(上)
  • php商城系统 开源代码 全球最流行的25款PHP框架,你值得拥有!php开源分销商城源码
  • WEB应用中,UTF-8编码和GB2312编码(图)
  • php新手购物车实现的原理基于json与实现购物车的方法
  • 用php进行原生开发云原生时代来临,云安全技术将何去何从?(图)开发php用到的源代码
  • 如何通过html+css+php来快速的制作动态网页
  • PHP实现微信公众号支付功能开发流程、原理及相关操作技巧
  • 微网站源码 php国内自主开发的VR视频系统上线了,月销售额超过300万php网站源码 下载

相关

标签

seo(1192) 市场营销(661) 网站制作(574) 网站建设(568) 搜索引擎(553) 网站(482) PHP(363) 编程语言(346) 建站(294) 关键词排名优化(267) 网站建设公司(245) 优化(216) seo排名(207) 域名(190) 软件(171) 网站优化(150) 搜索引擎优化(150) 外链(141) 科技(136) 网站关键词(124) 网站排名优化(123) 域名服务器(120) 网站排名(111) 时政(103) 排名优化(95) 搜索引擎收录(93) 网站设计(93) 电子商务(88) 引擎(86) 移动互联网(85) 开发框架(79) 开发(75) 网站服务器(74) 框架(68) 前端开发(68) 网站建设方案(66) 网站分析(66) 关键(64) 流量(63) 源码(62) 百度优化(62) 网站权重(61) 开放源代码(59) seo培训(53) php框架(51) 网页设计(51) 百度(51) 网站建设知识(50) 谷歌(50) 网站结构(50)
宿迁腾云网络网站建设公司
网站建设
  • 私人定制
  • 标准模板建站
  • 经济模板建站
精品模板

宿迁腾云网络网站建设公司

联系电话:13160355545

公司地址:江苏省宿迁市丽景湾华庭北门都市花园公寓9楼907

联系邮箱:admin@tyweb.net

全国分站
  • 北京
  • 广东
  • 东莞 广州 中山 深圳 惠州 江门 珠海 汕头 佛山 湛江 河源 肇庆 潮州 清远 韶关 揭阳 阳江 云浮 茂名 梅州 汕尾
  • 山东
  • 济南 青岛 临沂 济宁 菏泽 烟台 泰安 淄博 潍坊 日照 威海 滨州 东营 聊城 德州 莱芜 枣庄
  • 江苏
  • 苏州 徐州 盐城 无锡 南京 南通 连云港 常州 扬州 镇江 淮安 泰州 宿迁
  • 河南
  • 郑州 南阳 新乡 安阳 洛阳 信阳 平顶山 周口 商丘 开封 焦作 驻马店 濮阳 三门峡 漯河 许昌 鹤壁 济源
  • 上海
  • 河北
  • 石家庄 唐山 保定 邯郸 邢台 沧州 秦皇岛 张家口 衡水 廊坊 承德
  • 浙江
  • 温州 宁波 杭州 台州 嘉兴 金华 湖州 绍兴 舟山 丽水 衢州
  • 陕西
  • 西安 咸阳 宝鸡 汉中 渭南 安康 榆林 商洛 延安 铜川
  • 湖南
  • 长沙 邵阳 常德 衡阳 株洲 湘潭 永州 岳阳 怀化 郴州 娄底 益阳 张家界 湘西
  • 重庆
  • 福建
  • 漳州 泉州 厦门 福州 莆田 宁德 三明 南平 龙岩
  • 天津
  • 云南
  • 昆明 红河 大理 文山 德宏 曲靖 昭通 楚雄 保山 玉溪 丽江 临沧 思茅 西双版纳 怒江 迪庆
  • 四川
  • 成都 绵阳 广元 达州 南充 德阳 广安 阿坝 巴中 遂宁 内江 凉山 攀枝花 乐山 自贡 泸州 雅安 宜宾 资阳 眉山 甘孜
  • 广西
  • 贵港 玉林 北海 南宁 柳州 桂林 梧州 钦州 来宾 河池 百色 贺州 崇左 防城港
  • 安徽
  • 芜湖 合肥 六安 宿州 阜阳 安庆 马鞍山 蚌埠 淮北 淮南 宣城 黄山 铜陵 亳州 池州 巢湖 滁州
  • 海南
  • 三亚 海口 琼海 文昌 东方
  • 江西
  • 南昌 赣州 上饶 吉安 九江 新余 抚州 宜春 景德镇 萍乡 鹰潭
  • 湖北
  • 武汉 宜昌 襄樊 荆州 恩施 孝感 黄冈 十堰 咸宁 黄石 仙桃 随州 天门 荆门 潜江 鄂州 神农架
  • 山西
  • 太原 大同 运城 长治 晋城 忻州 临汾 吕梁 晋中 阳泉 朔州
  • 辽宁
  • 大连 沈阳 丹东 辽阳 葫芦岛 锦州 朝阳 营口 鞍山 抚顺 阜新 本溪 盘锦 铁岭
  • 黑龙江
  • 齐齐哈尔 哈尔滨 大庆 佳木斯 双鸭山 牡丹江 鸡西 黑河 绥化 鹤岗 伊春 大兴安岭 七台河
  • 内蒙古
  • 赤峰 包头 通辽 呼和浩特 乌海 鄂尔多斯 呼伦贝尔
  • 贵州
  • 贵阳 黔东 黔南 遵义 黔西 毕节 铜仁 安顺 六盘水
  • 甘肃
  • 兰州 天水 庆阳 武威 酒泉 张掖 陇南 白银 定西 平凉 嘉峪关 临夏 金昌 甘南
  • 青海
  • 西宁 海西 海东 海北 果洛 玉树 黄南
  • 新疆
  • 乌鲁木齐 伊犁 昌吉 石河子 哈密
  • 西藏
  • 拉萨 山南 林芝 日喀则
  • 吉林
  • 长春 白山 白城 延边 松原 辽源 通化 四平
  • 宁夏
  • 银川 吴忠 中卫 石嘴山 固原
SiteMap
网站地图
TAG标签
Copyright © 2017-2025 TYWEB.NET 宿迁腾云网络科技有限公司 ALL RIGHTS RESERVED.   苏ICP备17033535号-1

热门搜索

网站建设 网站 公司 宿迁 模版 模板 源码 教育 学校 响应式 百度 营销型 seo 网站架构 交通设备制作 教育类网站 项王故里网站建设案例 中文编程 优化 管理
  • 客服

    在线客服

  • 电话

    13160355545

  • 微信

精品模板
建站费用
成功案例
联系我们