layui 动态加载 select

2023-11-05

感谢小张帅三代以及他的好文
layui ajax select 动态添加数据方法,给我指明了前进的方向。
首先,这是一个学习的过程,并不是最优方案。只是“玩索而有得”而己。
做了一个联动的搜索框,本来一开始想用layuiselect第三方插件,但后来没有成功,或者是说没有实现自己想要的目的。就利用layui现成的一套东东做了一下。按钮及功能如下:
1.年:点击“年”,“商品类别”随刷新并指向第一个“全部数据”,数据表随刷新;
2.商品类别:点击“商品类别”,“年”不动,数据表随刷新;
3.搜索文字框:点“搜索文字框”,自动根据“年”和“商品类别”匹配数据库相关内容,也是ajax系列;
4.搜索:点“搜索”,根据前面3个框的内容做综合查询,并刷新列表;
5.重置:点“重置”,回到页面初始状态,并且不刷新页面,但刷新列表。

下面贴出三段代码
这是html

<div class="layui-form layui-inline layui-col-md6 "  lay-filter="form_whereyear">
	<select name="whereyear" id="whereyear" lay-filter="whereyear" >
	</select>
</div>

这是JS:

 loadSelect_whereyear:function (doctype,whereyear){
        var form=layui.form;
        var option = "<option value=''>所有年份</option>";//初始化option的选项
        $.ajax({
            url: "/index/docnumberajax/select_whereyear",
            type: 'POST',
            data:'doctype='+doctype
        })
            .done(function(datas) {
                for(var i=0;i<datas.length;i++){
                    var year=datas[i]['name'];
                    //name是从后台提取的字段;
                    if (year!= whereyear){
                        option+="<option value='"+datas[i]['name']+"'>"+datas[i]['name']+"</option>";//拼接option中的内容
                        $("#whereyear").html(option);//将option的拼接内容加入select中,注意选择器是select的ID
                    }
                    else{
                        option+="<option selected='selected' value='"+datas[i]['name']+"'>"+datas[i]['name']+"</option>";//拼接option中的内容
                        $("#whereyear").html(option);//将option的拼接内容加入select中,注意选择器是select的ID
                    }

                }
                form.render('select','form_whereyear');//重点:重新渲染select
            })
            .fail(function() {
                console.log("error");
            });


    },

这是后台:

    public function select_whereyear(){
        $account = session('adminAccount');
        $usereditor = $account['username'];
        $doctype=input('doctype');
        $where[] = [
            ['a.doctype', '=', $doctype],//这个是文件类型转换1为一种文件,2为另一种文件
            ['a.status','=',1],
        ];
        $docyearData = Db::name('docnumber')->
        alias('a')->
        field(' a.doc_year as name')->
        whereOr('editor|applicant', '=', $usereditor)->
        where($where)->
        order('a.doc_year', 'ASC')->
        group('a.doc_year')->
        select();
		return json($docyearData);
    }
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

layui 动态加载 select 的相关文章

  • getJson问题,它返回未定义

    大家好 我有这个代码 var temp if method 1 temp Words val get the words from textbox else getJSON http localhost mine test js funct
  • 如何从 jquery .load 获取 php 响应

    例如我给出另一个代码 这是我的 some3 php 代码 第一个文件
  • jPlayer 无法在 Firefox 中播放 mp3

    我正在集成 jplayer 来播放由使用 jQuery 的单击事件触发的精选 mp3 文件 用于实现此目的的代码是 play link click function jquery jplayer 1 jPlayer destroy srcF
  • Cakephp - CSRF 令牌不匹配

    我在 Cakephp 3 6 中有一个项目 其中 MessageController 中的 3 个操作由 Ajax 调用 但是 我有一个问题 当我向其中一个操作发送请求时 XHR 会向我返回以下内容 message CSRF token m
  • 向 jQuery 函数 Interval 添加动画

    我的问题是如何向倒计时器添加一些动画 我的意思是每次调用 Function Interval 时都需要添加一些动画 如下所示 youtube 视频链接 https www youtube com watch v A9fnvhcWPRo 第二
  • 尝试在 JavaScript 中循环前 50 个偶数斐波那契数时出现错误输出 [重复]

    这个问题在这里已经有答案了 我是 JavaScript 新手 无法让我的代码正常工作 非常感谢任何帮助 指导 当尝试 显示前 50 个偶数斐波那契数的总和 时 我得到错误的输出 当前为 9 715575428267785e 30 我需要 1
  • Jquery 动画背景图像过渡

    我有一个导航栏 当将鼠标悬停在某个项目上时 背景图像会发生变化 效果很好 但是 我希望该图像从顶部滑入 并在您停止悬停时向上滑回 我一直在尝试使用 JQuery 使用 css bacgroundImage 和滑动或切换来做到这一点 但这些似
  • jQuery .wrap() 不环绕克隆元素

    function extend notify function options duration var defaults inline true href html var options extend defaults options
  • jquery ui 选项卡不再支持 cookie?怎么办?

    我很抱歉这是一个开放式问题 但我很茫然 从 jquery UI 1 9 版本开始 它们使用cookie选项以保存跨多个页面的选项卡的活动状态 http jqueryui com upgrade guide 1 9 deprecated co
  • 使用jquery tagit插件,是否有办法禁用所有条目?

    我有一个页面并且正在使用jquery tagit 插件 http aehlke github io tag it 效果很好 但我试图在单击按钮时禁用它 并使其具有与禁用选择下拉菜单时类似的行为 如下所示 selectDropdown val
  • 移动浏览器上的 Javascript / jQuery 页面更改事件

    我正在设计一个移动网站 同时考虑所有领先的浏览器 Safari Chrome Dolphin Opera 我想显示一个 正在加载 元素页面导航 更改 请求新页面 我无法在锚标签上使用点击事件 因为有很多锚标签存在preventDefault
  • 如何在 Asp.Net MVC 上实现客户端 Ajax 登录(Asp.Net Webforms 解决方案的链接位于此处)

    我正在尝试在 Asp Net MVC 上实现客户端 ajax 登录 我以前在 WebForms 上设置得很好 但现在我已经转向 MVC 这给我带来了一些麻烦 如果您想要有关 Asp Net Webforms 的客户端 Ajax 登录的教程
  • Bootstrap shown.bs.tab 事件不起作用

    我正在使用灵活的模板 http the8guild com themes html flexy v1 7 stylesPage html 使用引导程序 并且我无法让选项卡上的 shown bs tab 事件正常工作 我已经成功让它发挥作用J
  • jQuery自动完成插件-自定义突出显示功能

    我的每个项目的自动完成结果如下所示 h3 Celebrity Sweepstakes h3 p 0 episodes p 但我只想突出显示 H3 内的标题 请参阅下面的 突出显示 功能 我不知道如何更改原始正则表达式以仅替换标题内的内容 s
  • php循环中的ajax在按钮单击时执行操作

    所以我有一个 php 循环 我使用 jquery 滑动切换来隐藏 显示带有 sql 结果的表 目前该表仅使用 php 加载 但由于发生了很多事情 导致了一些加载问题 我需要使用滑动切换 btn 来触发 ajax 因此它仅在按下按钮时请求当前
  • 如何使 Nivo 滑块响应式

    我在 WordPress 中使用 NivoSlider 并对主题实现了一些响应式 css 我也修复了 Nivo Slider 中图像的宽度和高度以及背景大小 但它仅显示一次正确的大小 然后在滑块中显示大图像 这是该网站的链接 Website
  • 有没有办法限制 Google 地点自动完成功能搜索城市的街道?

    使用 Google 地方信息时可以将搜索限制在城市的街道吗Autocomplete 您可以设置Autocomplete使用选项geocode作为类型 这将限制返回到地址的结果 var input document getElementByI
  • 如何使用 Ajax 对 Oracle APEX 表格表单执行逐行验证?

    使用我执行的相同验证 处理 基于此线程 在 Oracle APEX v4 2 2 中通过 Ajax 调用 Oracle 函数进行现场验证 https stackoverflow com questions 21474303 calling
  • jquery ajax“发布”调用

    我是 jQuery 和 Ajax 的新手 并且在 发布 方面遇到问题 我正在使用 jQuery Ajax post 调用将数据保存到数据库 当我尝试保存数据时 它将 null 传递给我的 C 方法 jQuery 看起来像这样 functio
  • Django:单击按钮加载另一个模板

    我已经在 django 项目上工作了几个星期 只是玩玩以便掌握它的窍门 我有点困惑 我现在有一个名为 home html 的模板 我想知道是否可以将另一个名为 profile html 的模板设置为 home html 模板上的链接 我有一

随机推荐

  • C++ 大话设计之《备忘录模式》(优缺点,设计原理,常用场景)

    备忘录模式是一种行为型模式 优点 备忘录模式的主要优点是提供了一种可以恢复状态的机制 当用户需要时能够比较方便地将数据恢复到某个历史的状态 它实现了内部状态的封装 除了创建它的发起人之外 其他对象都不能够访问这些状态信息 此外 它简化了发起
  • 【Tableau小练习】销售数据的分析思路

    概要 电商数据分析案例 分析思路 从整体到局部 关键指标 销售额 通过宏观的数据 找出最明显的数据趋势 结合品牌自身的营销活动 再下钻挖掘详细的价值信息 成果展示 Tableau Public https public tableau co
  • 17_Nginx_PostRead阶段

    文章目录 post read 阶段 获取真实的用户IP地址 基于变量使用用户ip realip 模块 realip 模块的指令 post read 阶段 获取真实的用户IP地址 tcp 四元组 src ip src port dst ip
  • 本地镜像如何推送到docker 仓库

    要将本地镜像推送到Docker仓库 需要按照以下步骤操作 1 首先 使用 docker login 命令登录到Docker仓库 输入用户名和密码进行身份验证 2 然后 使用 docker tag 命令为本地镜像添加标签 语法为 docker
  • 39_MoreThanHalfNumber 数组中超过一半的元素

    数组中有一个数字出现的次数超过数组长度的一半 请找出这个数字 你可以假设数组是非空的 并且给定的数组总是存在多数元素 示例 1 输入 1 2 3 2 2 2 5 4 2 输出 2 1 利用hashmap统计数组中元素出现的次数 如果次数大于
  • Elasticsearch 搜索数组字段

    我的个人博客 逐步前行STEP 1 搜索 数组字段 tags 中同时存在元素 str a str b query bool filter term tags str a term tags str b 2 搜索 数组字段 tags 中存在元
  • vue怎么vw布局好用_vue2.x使用响应式vw布局(px自动转为vw)

    浏览器支持一览 1 依赖包引入 yarn add postcss px to viewport opt postcss viewport units cssnano cssnano preset advanced dev 2 更改项目根目录
  • [519]matplotlib(三)

    带误差线的条形图 import matplotlib pyplot as plt 输入数据 mean values 1 2 3 variance 0 2 0 4 0 5 bar labels bar 1 bar 2 bar 3 绘制图形 x
  • python3刷leetcode第165题165.compare version number

    class Solution def compareVersion self version1 str version2 str gt int version1 version1 split version2 version2 split
  • 入门ResNet,在Cub200数据集上复现Resnet50

    1 背景问题 1 如果只是单纯地把卷积层和池化层进行堆叠 造成的问题就会有梯度消失和梯度爆炸 梯度消失是指当在某一层进行BP的时候 误差为一个小于零的数 那不断相乘 就会趋近于零 梯度爆炸则是指某一层的开始误差都是大于1的数 直接相乘就会导
  • centos7 sh 注释_shell 中的单行注释和多行注释

    导读 关于 shell 中的单行注释和多行注释的问题 本文档介绍两种实用的方法 1 单行注释 众所周知 比如想要注释 echo Hello World root Jaking vim test sh echo Hello World 2 多
  • 如何进行需求测试/需求评审

    由于软件系统的复杂性 在需求分析阶段可能存在着开发方对委托方业务需求理解不全面 不准确的情况 在这种情况下 如果不进行相关的质量控制 往往会造成开发结果与用户需求不一致的后果 需求测试的目的就在于保证软件设计最大可能地满足有关用户的所有需求
  • 从前端传来的JSON中获取数据

    首先推荐一个神器 JSON在线解析及格式化验证 JSON cn 里面的 JSON在线解析 和 JSON生成JAVA实体 两个功能 前几天可是帮了我大忙了 前几天写一个功能 在这个功能中前端传过来的JSON十分复杂 示例如 Dispositi
  • virtualbox 安装centos7之后无法ssh登陆

    文章目录 virtualbox 安装 centos7 开启centos7网络 sshd 服务是否开启 设置 virtualbox 端口转发功能 设置secureCrt 连接参数 virtualbox 安装 centos7 virtualbo
  • 贝叶斯网络与R语言

    贝叶斯网络与R语言 基本语句 1 1网络的创建 加载扩展包和bnlearn包自带数据集marks 数据集marks 88 学生5门课的成绩 MECH mechanics VECT vectors ALG algebra ANL analys
  • 十一. Kubernetes 容器 container 设置详解

    目录 一 基础解释 yaml设置容器拉取镜像注意点 1 containers image 镜像 2 containers imagePullPolicy 镜像拉取策略 3 配置拉取私库镜像 spec下的imagePullSecrets 4
  • 【六级单词】

    affordable 价格合理的 cash 现金 insurance 保险 forune 一大笔钱 机会 运气 misfortune 不幸 灾难 luxury 奢侈 豪华 luxurious shop pension 养老金 抚恤金 com
  • C语言每日一题:16:数对。

    思路一 基本思路 1 x y均不大于n 就是小于等于n 2 x y大于等于k 3 一般的思路使用双for循环去遍历每一对数 代码实现 include
  • pytorch霹雳巴拉——图像分类篇

    up给的教程路线 图像分类 目标检测 一步步学习用pytorch实现深度学习在cv上的应用 并做笔记整理和总结 参考内容来自 up主的b站链接 https space bilibili com 18161609 channel index
  • layui 动态加载 select

    感谢小张帅三代以及他的好文 layui ajax select 动态添加数据方法 给我指明了前进的方向 首先 这是一个学习的过程 并不是最优方案 只是 玩索而有得 而己 做了一个联动的搜索框 本来一开始想用layuiselect第三方插件