layui 实现 城市联动

<div class="layuimini-container"><form id="app-form" class="layui-form layuimini-form"><div class="layui-form-item"><label class="layui-form-label">标题</label><div class="layui-input-block"><input type="text" name="title" class="layui-input"  placeholder="请输入标题" value="{$row.title|default=''}"></div></div><div class="layui-form-item"><label class="layui-form-label required">缩略图</label><div class="layui-input-block layuimini-upload"><input name="image" class="layui-input layui-col-xs6"   placeholder="请上传缩略图" value="{$row.image|default=''}"><div class="layuimini-upload-btn"><span><a class="layui-btn" data-upload="image" data-upload-number="one" data-upload-exts="png|jpg|ico|jpeg" data-upload-icon="image"><i class="fa fa-upload"></i> 上传</a></span><span><a class="layui-btn layui-btn-normal" id="select_image" data-upload-select="image" data-upload-number="one" data-upload-mimetype="image/*"><i class="fa fa-list"></i> 选择</a></span></div></div></div><div class="layui-form-item"><label class="layui-form-label">描述</label><div class="layui-input-block"><input type="text" name="description" class="layui-input"  placeholder="请输入描述" value="{$row.description|default=''}"></div></div><div class="layui-form-item"><label class="layui-form-label">选择省市</label><div class="layui-input-inline"><select name="province" lay-filter="magazine"><option value="">请选择省</option>{foreach $provinceList as $key=>$val}<option value="{$val.id}" {if $val.name == $row.province}  selected {/if}>{$val.name}</option>{/foreach}</select></div><div class="layui-input-inline"><select name="city"><option value="{$row.city}">{$row.city}</option></select></div></div><div class="layui-form-item"><label class="layui-form-label">地区</label><div class="layui-input-block"><input type="text" name="address" class="layui-input"  placeholder="请输入地区" value="{$row.address|default=''}"></div></div><div class="layui-form-item"><label class="layui-form-label">电话</label><div class="layui-input-block"><input type="text" name="phone" class="layui-input"  placeholder="请输入电话" value="{$row.phone|default=''}"></div></div><div class="hr-line"></div><div class="layui-form-item text-center"><button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit>确认</button><button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">重置</button></div></form>
</div><script>layui.use('form', function(){var form = layui.form;form.on('select(magazine)', function(data){var areaId=data.elem.value;$.ajax({type: 'POST',url: "/api/member/getCity",data: {parent_id:areaId},dataType:  'json',success:function(e){console.log(e.data);//empty() 方法从被选元素移除所有内容$("select[name='city']").empty();var html = "<option value=''>请选择市<option>";$(e.data).each(function (v, k) {html += "<option value='" + k.city_id + "'>" + k.name + "</option>";});//把遍历的数据放到select表里面$("select[name='city']").append(html);//从新刷新了一下下拉框form.render('select');      //重新渲染}});});});
</script>

PHP 代码

        /*** @NodeAnotation(title="获取城市")*/public function getCity(){$param = $this->request->param();$where = [];if (isset($param['parent_id']) && $param['parent_id'] != '') {$where['upid'] = $param['parent_id'];} else {$where['level'] = 0;}$city = Db::name('city')->field('id,level,name,upid')->where($where)->select();return Json(['code' => 200, 'msg' => '获取成功', 'data' => $city]);}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/885276.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringBoot整合SpringSecurity实现密码加密解密、登录认证退出功能

文章目录 SpringBoot整合SpringSecurity实现密码加密解密、登录认证退出功能一、引言二、JWT简介与组成1、JWT简介2、JWT的组成2.1、Header&#xff08;头部&#xff09;2.2、Payload&#xff08;载荷&#xff09;2.3、Signature&#xff08;签名&#xff09; 三、Spring Secur…

重建大师7.0 | 全新倾斜高斯泼溅OPGS技术,实景三维大规模城市三维场景的更逼真化表达

在刚刚结束的“AI智算、国产信创”2024秋季新品发布会上&#xff0c;大势智慧隆重发布了重建大师7.0、重建农场信创版、低空三维AI智算平台等覆盖实景三维数据生产体系全流程、推进实景三维国产化建设与低空应用的全新系列产品。 今天&#xff0c;重点为大家介绍一下重建大师7.…

华为 Atlas500 Euler 欧拉系统操作指南

华为 Atlas500 Euler 欧拉系统操作指南 ssh root连接 找到Atlas500的IP地址&#xff0c;如&#xff1a;192.168.1.166 账号/密码&#xff1a;admin/Huawei123 root/密码&#xff1a;Huawei123456 #直接使用root ssh连接 这里受限不让直接用root连接 ssh root192.168.1.116 #…

【MySQL 保姆级教学】深层理解索引及特性(重点)--下(12)

索引&#xff08;重点&#xff09; 1. 索引的作用2. 索引操作2.1 主键索引2.1.1 主键索引的特点2.1.2 创建主键索引 2.2 唯一键索引2.2.1 唯一键索引的特点2.2.2 唯一索引的创建 2.3 普通索引2.3.1 普通索引的特点2.3.2 普通索引的创建 2.4 全文索引2.4.1 全文索引的作用2.4.2 …

SettlementfactoryController

目录 1、 SettlementfactoryController 1.1、 查询结算明细信息 1.1.1、 //SYS_RecRepairItemDetail修理项目明细表 1.1.2、 //SYS_CollageDetai领料明细表 1.1.3、 //SYS_RecOtherCostDetail其他费用明细表 1.1.4、 //SYS_InsuranceDetail保险理赔明细表 1.1.5、…

ubuntu22.04 docker-compose安装postgresql数据库

在 Ubuntu 22.04 上使用 Docker Compose 来安装和运行 PostgreSQL 数据库的过程如下&#xff1a; 1. 创建 Docker Compose 文件 在项目文件夹中创建一个 docker-compose.yml 文件&#xff0c;以配置 PostgreSQL 数据库的服务。 mkdir postgres_docker cd postgres_docker to…

只允许指定ip远程连接ssh

我们都会使用securtcrt或者xshell等软件进行远程登录&#xff0c;这样虽然会给我们带来很多便捷&#xff0c;但是同样会存在一定的风险。有很多人专门通过重复的扫描试图破解我们的linux服务器&#xff0c;从而获取免费的“肉鸡”。因此我们可以通过设置hosts.allow和hosts.den…

力扣: 144 二叉树 -- 先序遍历

二叉树 – 先序遍历 描述&#xff1a; 给你二叉树的根节点 root &#xff0c;返回它节点值的 前序 遍历。 示例&#xff1a; 先序遍历&#xff1a;根左右 何解&#xff1f; 1、递归 : 无需多言一看就懂 2、遍历法 中序查找时&#xff0c;最先出入的节点是左子树中的最左侧二叉…

maybe_unused]]编译属性

C(17)&#xff1a;[[maybe_unused]]编译属性_maybe unused-CSDN博客 避免编译器发出警告。 [[maybe_unused]] int f() //没有被使用的函数 {return 1; }int main() {[[maybe_unused]] int i 0; //没有被使用的变量return 0; }

【K8S系列】K8S 集群 CPU 爆满导致 Pod Pending 状态的分析与解决方案

在 Kubernetes 集群中&#xff0c;CPU 突然爆满可能导致 Pod 状态变为 Pending&#xff0c;影响应用的可用性。本文将深入分析其原因&#xff0c;并附上相关命令及其执行结果&#xff0c;帮助你更好地理解和解决此问题。 1. 问题描述 在 Kubernetes 集群中&#xff0c;当 CPU …

css中的样式穿透

1. >>> 操作符 <style scoped> /* 影响子组件的样式 */ .parent >>> .child {color: red; } </style>注意&#xff1a;>>> 操作符在某些预处理器&#xff08;如Sass&#xff09;中可能无法识别&#xff0c;因为它不是标准的CSS语法。 …

Linux awk命令详解-参数-选项-内置变量-内置函数-脚本(多图、多示例)

文章目录 awk基础结构说明与示例参数与内置变量常用参数内置变量其他参数内置变量 简单示例理解option简单参数NR与FNR-v ARGC ARGV参数 执行脚本if elsefor循环关联数组指定匹配pattern 使用正则指定分隔符理解pattern正则与逻辑算术 printfif else for whileBEGIN ENDnext(跳…

【Android】组件化开发入门

文章目录 引入组件是什么?为什么使用组件化开发?什么是模块化&#xff0c;组件化&#xff0c;插件化&#xff1f;常见实现 组件分层创建module 组件单独调试配置组件工程类型配置组件ApplicationId和AndroidManifest文件 引入 组件是什么? 组件&#xff08;Component&#…

计算用户订购率梧桐数据库和oracle数据库sql分析

一、背景说明 移动运营商平台提供多种类型的产品权益&#xff0c;用户可以通过订购来使用。平台需要定期统计各个产品的用户订购情况&#xff0c;以便了解各个产品的受欢迎程度。这些统计数据将用于优化产品、提升用户体验和制定市场推广策略。 二、表结构说明 梧桐数据库建…

MySQL数据库基础(一) MySQL安装及数据类型

目录 一、MySQL数据裤简介 二、MySQL数据的安装 2.1、MySQL安装 2.2、修改MySQL密码登录策略 三、数据库基础管理 3.1、连接方式及数据储存流程 3.2、库管理命令 3.3、表管理命令 3.4、记录管理命令 四、MySQL数据类型 4.1、常见信息种类 4.2、字符型 4.3、数值型 4.4、日期时间…

防抖函数--应用场景及示例

防抖函数–应用场景及示例 1.当短时间内出现多次调用同一个东西的时候-可以使用 场景1 接口多次相应401–但是只需要提醒一次 //time 为全局变量 let time;axios.interceptors.response.use(function (response) {if (response.data.code 401) {//当401时清除缓存信息// Mes…

云原生+AI核心技术&最佳实践

以下内容是我在陕西理工大学2023级人工智能专业和网络专业的演讲内容&#xff0c;分享给大家。 各位老师、同学们&#xff0c;大家好啊&#xff01;能在这里跟大家一起聊聊咱们计算机专业那些事儿&#xff0c;我真的觉得超级兴奋&#xff01; 首先&#xff0c;自我介绍一下&am…

Qt QCustomplot 在采集信号领域的应用

文章目录 一、常用的几种开源库:1、QCustomPlot:2、QChart:3、Qwt:QCustomplot 在采集信号领域的应用1、应用实例时域分析频谱分析2.数据筛选和处理其他参考自然界中的物理过程、传感器和传感器网络、电路和电子设备、通信系统等都是模拟信号的来源。通过可视化模拟信号,可以…

AI 大模型重塑软件开发:从代码自动生成到智能测试

引言 随着人工智能技术的飞速发展&#xff0c;特别是大规模预训练模型&#xff08;大模型&#xff09;的出现&#xff0c;AI 正在深刻地改变软件开发的各个环节。从代码自动生成到智能测试&#xff0c;AI 不仅提高了开发效率&#xff0c;减少了错误&#xff0c;还带来了全新的…

C++11的简介

杀马特主页&#xff1a;羑悻的小杀马特.-CSDN博客 ------ ->欢迎阅读 欢迎阅读 欢迎阅读 欢迎阅读 <------- 目录 一列表初始化的变化&#xff1a; 二左右值即各自引用的概念&#xff1a; 2.1左右…