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

腾云网络 八年经验专注网站建设
  • 首页
  • 服务项目
    • 网站建设
    • 微信小程序
    • 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论坛开发教程
  • 投资界新芽略有删减:微信公众平台天然不适合做营销
  • 腾云网络教你如何扩展Laravel常用方法
  • 使用开发Jaa初学者来说明显的变化,你知道吗?
  • php仿百度文库实现文档在线预览百度文库发布“乘风计划”2021年投入1亿现金和30亿流量vue 实现word文档预览
  • 帕拉卡科技获浙大教育基金500万元天使轮投资(图)
  • 表单增加“”验证功能,防护更强(组图)
  • PHP中使用提高动态网站性能安装的说明书(图)
  • php 多进程框架发布v3.4.6部分组件更新|一款企业级分布式PHP协程框架更新php fpm进程数
  • php技术 如何查看中级PHP程序员1.性能好等知识?(一)php模板技术smarty第1讲

相关

标签

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

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

联系电话:13160355545

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

联系邮箱:admin@tyweb.net

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

热门搜索

百度 下载 2025 2026 2024 请输入关健词 货源 货货源 虚拟 禅道
  • 客服

    在线客服

  • 电话

    13160355545

  • 微信

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