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,一经查实,立即删除!

相关文章

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

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

【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 …

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

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

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

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

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&#…

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、日期时间…

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

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

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

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

C++11的简介

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

大模型的常用指令格式 --> ShareGPT 和 Alpaca (以 llama-factory 里的设置为例)

ShareGPT 格式 提出背景&#xff1a;ShareGPT 格式起初来自于用户在社交平台上分享与聊天模型的对话记录&#xff0c;这些记录涵盖了丰富的多轮对话内容。研究者们意识到&#xff0c;这类真实的对话数据可以帮助模型更好地学习多轮对话的上下文保持、回应生成等能力。因此&…

5G时代已来:我们该如何迎接超高速网络?

内容概要 随着5G技术的普及&#xff0c;我们的生活似乎变得更加“科幻”了。想象一下&#xff0c;未来的智能家居将不仅仅是能够听你说“开灯”&#xff1b;它们可能会主动询问你今天心情如何&#xff0c;甚至会推荐你一杯“维他命C芒果榨汁”&#xff0c;帮助你抵御夏天的炎热…

Unity SRP学习笔记(二)

Unity SRP学习笔记&#xff08;二&#xff09; 主要参考&#xff1a; https://catlikecoding.com/unity/tutorials/custom-srp/ https://docs.unity.cn/cn/2022.3/ScriptReference/index.html 中文教程部分参考&#xff08;可选&#xff09;&#xff1a; https://tuncle.blog/c…

【JavaEE初阶 — 多线程】Thread类的方法&线程生命周期

目录 1. start() (1) start() 的性质 (2) start() 和 Thread类 的关系 2. 终止一个线程 (1)通过共享的标记结束线程 1. 通过共享的标记结束线程 2. 关于 lamda 表达式的“变量捕获” (2) 调用interrupt()方法 1. isInterrupted() 2. currentThread() …

粤荣学校与亲邻家政达成合作,创造双向人才输送机制

原标题&#xff1a;超过大学生月薪&#xff01;粤荣学校与亲邻家政达成合作&#xff0c;创造双向人才输送机制&#xff0c;解决中年人就业难题&#xff01; 广州市白云区粤荣职业培训学校余智强校长与广州亲邻家政服务有限公司朱利生经理于2024年11月8日下午共同签署了一份重要…

【MacOS实操】如何基于SSH连接远程linux服务器

MacOS上远程连接linux服务器&#xff0c;可以使用ssh命令pem秘钥文件连接。 一、准备pem秘钥文件 如果已经有pem文件&#xff0c;则跳过这一步。如果手上有ppk文件&#xff0c;那么需要先转换为pem文件。 macOS 的默认 SSH 客户端不支持 PPK 格式&#xff0c;你需要将 PPK 文…

parseInt 是一个内置的 JavaScript 函数,用于将字符串转换为整数。

parseInt(options.checkNumber, 10) 中的 10 表示将字符串转换为十进制整数。 解释 parseInt 函数&#xff1a; parseInt 是一个内置的 JavaScript 函数&#xff0c;用于将字符串转换为整数。它有两个参数&#xff1a; 第一个参数是要转换的字符串。第二个参数是转换时使用的基…

鸿蒙ArkTS中的布局容器组件(Scroll、List、Tabs)

1、Scroll组件 Scroll组件是一个可滚动的容器组件&#xff0c;用于在子组件的布局尺寸超过父组件尺寸时提供滚动功能。它允许在其内部容纳超过自身显示区域的内容&#xff0c;并通过滚动机制来查看全部内容。这对于显示大量信息&#xff08;如长列表、长篇文本或大型图像等&…

ElasticSearch备考 -- Manage the index lifecycle (ILM)

一、题目 在集群中&#xff0c;数据首先分布在data_hot节点&#xff0c;rollover 设置max_age:3d, max_docs:5,max_size:50gb, 优先级为100。 max_age:15s, forcemarge 段合并&#xff0c;数据迁移到data_warm节点&#xff0c; 副本数为0&#xff0c;优先级为50 max_age:30s, 数…

信息安全工程师(81)网络安全测评质量管理与标准

一、网络安全测评质量管理 遵循标准和流程 网络安全测评应严格遵循国家相关标准和流程&#xff0c;确保测评工作的规范性和一致性。这些标准和流程通常包括测评方法、测评步骤、测评指标等&#xff0c;为测评工作提供明确的指导和依据。 选择合格的测评团队 测评团队应具备相关…