X-admin框架中change事件失效如何实现省市区三级联动

2023-11-18

Uncaught TypeError: layui.form is not a function的错误

我现在使用的就是X-admin1.1版本的后台模板,在实现了三级联动的情况下想套上去结果发现会报上面的错误等等

在html中select标签需要加上 lay-filter="" 如下代码中所示,后面才能选中到这个select,form.render();是为了渲染这个改变的下拉框

<select lay-filter="demo1" name="hostel_id1" id="hostel_id1" style="width:150px;">
		<option>请选择</option>
		{volist name="hostel_list" id="hostel"}
		    <option value="{$hostel['name']}">{$hostel['name']}</option>
		{/volist}                                                
</select>



<script type="text/javascript">
	layui.use(['form', 'jquery'],function(){
    var $ = layui.jquery;
    var form = layui.form();
    form.on('select(test1)', function(data){
    	var province_id = data.value;
  		$.get("{:url('index/Admin/getcity')}",{'province_id':province_id},function(data){
            var data = JSON.parse(data);
            console.log(data);
            console.log(data['city'].length);
            var option=$("<option></option>");
                 var $select = $("#city_id");
                for(var i=0;i<data['city'].length;i++){
                   $select.append("<option value=" + data['city'][i]['name'] + ">" + data['city'][i]['name'] + "</option>");
                }
            form.render();   //渲染select
        })
	});

});
	layui.use(['form', 'jquery'],function(){
    var $ = layui.jquery;
    var form = layui.form();
    form.on('select(test2)', function(data){
    	var province_id = $('#province_id').val();
        var city_id=data.value;
        $.get("{:url('index/Admin/getdistrict')}",{'city_id':city_id,'province_id':province_id},function(data){
            var data = JSON.parse(data);
            console.log(data);
            var option=$("<option></option>");
                 var $select = $("#district_id");
                for(var i=0;i<data['area'].length;i++){
                   $select.append("<option value=" + data['area'][i] + ">" + data['area'][i] + "</option>");
                }
                form.render();
            })
        }); 
});


	layui.use(['form', 'jquery'],function(){
    var $ = layui.jquery;
    var form = layui.form();
    form.on('select(demo1)', function(data){
    	var province_id = data.value;
  		$.get("{:url('index/Admin/getcity1')}",{'province_id':province_id},function(data){
            var data = JSON.parse(data);
            console.log(data);
            
            var option=$("<option></option>");
                 var $select = $("#hostel_id2");
                for(var i=0;i<data['building'].length;i++){
                   $select.append("<option value=" + data['building'][i]['name'] + ">" + data['building'][i]['name'] + "</option>");
                }
            form.render();
        })
	});

});

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

X-admin框架中change事件失效如何实现省市区三级联动 的相关文章

随机推荐

  • 训练 open-mmlab/mmclassification

    代码下载 github https github com open mmlab mmclassification 确定模型 resnet18 点击configs gt resnet18 8 b32 in1k py 说明 模型文件 base
  • 空间里种菜、偷菜,重现只属于80后的回忆

    何为 无人农场 中国工程院院士罗锡文用五句话高度概括 耕种管收生产环节全覆盖 机库田间转移作业全自动 自动避障异况停车保安全 作物生产过程实施全监控 智能决策精准作业全无人 随着新一代信息技术飞速融入传统产业 农业数字化 网络化 智能化逐步
  • cesium js 路径_Cesium开发入门篇

    01 开发环境准备 利用Cesium API进行二次开发属于Web前端开发范畴 目前比较火的Web三剑客包括React Vue AngularJS 每个js库的详细介绍可转至官网查看 在此不做详细介绍 本次开发环境是基于Vue搭建的 需要安
  • 搭建VUE脚手架 + 引入element-ui

    转载路径 https segmentfault com a 1190000011023102 从新建vue项目到引入组件Element 一 新建项目 1 查看 node是不是已经安装好命令 node v 没有安装的先安装环境 https n
  • 云服务器被ddos五个解决方案

    如果你的网站或网络设备遭到了DDOS攻击 你可以采取以下步骤来解决这个问题 1 首先 应尽快联系你的厂家ISP 告诉他们你正在遭受DDOS攻击 他们可能会帮助你拦截攻击流量 并提供其他帮助 2 尝试使用拥有较大带宽的服务器或CDN 内容分发
  • Android Studio 常用快捷键整理(转载+体验)

    一 调换格式 Ctrl D 复制行 其实是复制粘贴到下一行 有用 alt shift 移动到上一行 行内容向上移动 剪切粘贴到上一行 还行 alt shift 移动到下一行 剪切粘贴到下一行 Ctrl R 查找后替换 逐个查找 自动跳跃 手
  • 域名备案指南

    在运营网站的过程中 有一件不可忽略的事情 那就是网站上线之前需要完成 ICP 备案 根据工信部规定 所有在境内运行的服务 有境内公网 IP 地址 能够通过公网访问 都必须进行 ICP 备案 1 哪些单位需要办理互联网网站备案 已在工信部备案
  • CentOS8安装redis5

    CentOS8安装redis5 CentOS8的安装镜像已经包含redis5的软件包 可以直接通过yum安装 安装并启动redis5 yum install y redis systemctl start redis service sys
  • Oracle VM VirtualBox安装及使用常见问题

    1 安装系统显示FATAL NO bootable medium found System halted 镜像问题 需要下载纯净的镜像 推荐MSDN所提供的镜像 从网上或者系统之家下载的将无法启动 https msdn itellyou c
  • uniapp小程序单页面改变手机电量,头部通知的颜色效果demo(整理)

    onShow 改变电池的颜色 wx setNavigationBarColor frontColor ffffff 只支持两种颜色 backgroundColor ffffff animation duration 1
  • 刷题day_9 : 删除链表的倒数第 N 个结点

    题意描述 给你一个链表 删除链表的倒数第 n 个结点 并且返回链表的头结点 利用虚拟头结点 和双指针法 如果要删除倒数第n个节点 让fast移动n步 然后让fast和slow同时移动 直到fast指向链表末尾 删掉slow所指向的节点就可以
  • MoCaPose:在宽松服装中实现动作捕捉

    动作姿态是人类个体活动和互动的基本信息来源 采集人们的动作信息能实现了解 分析日常生活等功能 尽管在宽松服装上可以使用IMU实现动作捕捉 但由于需要将大量IMU并将其节点牢固 精确地固定在特定的身体位置 因此并不适合许多现实生活中的应用 这
  • python cgi如何获得html post 的信息,如何在Python CGI脚本中读取所有HTTP标头?

    可以使用python在apache CGI脚本中获取自定义请求标头的值 解决方法与此类似 Apache的mod cgi将为收到的每个HTTP请求标头设置环境变量 以这种方式设置的变量都将带有HTTP 前缀 因此例如x client vers
  • pluto实现分析(10)

    本文档的Copyleft归yfydz所有 使用GPL发布 可以自由拷贝 转载 转载时请保持文档的完整性 严禁用于任何商业用途 msn yfydz no1 hotmail com 来源 http yfydz cublog cn 10 主机对
  • 信息网络传播权 服务器,信息网络传播权的特征

    信息网络传播权的特征 著作权法法律快车2018 05 1510 21 062415人阅读15赞 不论是专业人士 还是普通民众 对 广播权 和 信息网络传播权 的感知总是通过日常频繁接触广播电台 电视台 网站等传播媒介得以实现的 那么信息网络
  • pytorch低版本环境加载高版本(1.6+)模型报错(xxx is a zip archive (did you mean to use torch.jit.load()?))

    问题描述 transformers 4 0 版本训练出来的模型 在3 0的Model from pretrained中加载会报错 pytorch model bin is a zip archive did you mean to use
  • 最近读的AIGC相关论文思路解读

    AIGC之SD可控生成论文阅读记录 提示 本博客是作者本人最近对AIGC领域相关论文调研后 临时记录所用 所有观点都是来自作者本人局限理解 以及个人思考 不代表对 如果你也正好看过相关文章 发现作者的想法和思路有问题 欢迎评论区留言指正 既
  • renren-fast-vue 无法启动成功原因

    renren fast vue 无法启动主要是因为node版本过高 需要使用8x版本 并且安装node sass node版本 https blog csdn net weixin 42713970 article details 8650
  • python实现全排列_python实现全排列代码(回溯、深度优先搜索)

    从n个不同元素中任取m m n 个元素 按照一定的顺序排列起来 叫做从n个不同元素中取出m个元素的一个排列 当m n时所有的排列情况叫全排列 公式 全排列数f n n 定义0 1 1 递归实现全排列 回溯思想 1 1 思想 举个例子 比如你
  • X-admin框架中change事件失效如何实现省市区三级联动

    Uncaught TypeError layui form is not a function的错误 我现在使用的就是X admin1 1版本的后台模板 在实现了三级联动的情况下想套上去结果发现会报上面的错误等等 在html中select标