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 的相关文章

  • jQuery id 选择器在有 .在 ID 中[重复]

    这个问题在这里已经有答案了 我的html代码如下 div class chatbox html markup which is validated div 在上面的代码中dipesh parmardiv 动态添加 我正在使用以下代码访问它
  • javascript中输入类型时间的值

    我有这个html
  • Ajax JSON 数据和灯箱冲突

    我有一个带有灯箱插件的画廊设置光廊 http sachinchoolur github io lightGallery docs 该画廊与静态 HTML 完美配合 当我动态抓取 API 数据并尝试让灯箱处理这些项目时 问题就出现了 我似乎无
  • jQuery 检索和设置 html select 元素的选定选项值

    我正在尝试使用 jQuery 检索并设置选择元素 下拉列表 的选定值 为了检索我已经尝试过 myId find selected val 也 myId val 但两者都返回未定义 任何对此问题的见解将不胜感激 要获取 设置选择元素的实际 s
  • 为什么 JSON 结果可以是布尔值而不是对象或数组?

    From JSON 网站 http json org JSON 建立在两种结构之上 名称 值对的集合 在各种语言中 这被实现为对象 记录 结构 字典 哈希表 键控列表或关联数组 值的有序列表 在大多数语言中 这被实现为数组 向量 列表或序列
  • 将 jQuery 版本从 1.7.1 升级到 1.11.2

    在我当前的应用程序中 我使用的是 jQuery 版本 1 7 1 现在 我计划将jQuery版本升级到1 11 2 是否有任何补丁可以提供与现有应用程序的向后可比性 Thanks 尝试这个 http blog jquery com 2013
  • Jquery 两个字段的时间差(以小时为单位)

    我的表单中有两个字段 用户可以在其中选择输入时间 start time end time 我想在更改这些字段时重新计算另一个字段的值 我想做的是获取两次之间的小时数 例如 如果我的开始时间为 5 30 结束时间为 7 50 我想将结果 2
  • WooCommerce 使用 AJAX 设置购物车数量?

    我已经为此绞尽脑汁好几天了 需要一些指导 我正在为 WooCommerce 网站完全从头开始制作自定义主题 现在我正在尝试让购物车功能正常工作 我一直试图使用按钮 来更新购物车中产品的数量 对我来说问题似乎是WC 我在functions p
  • 禁用 Bootstrap 中的选项卡

    我正在尝试禁用引导程序中的选项卡 我一直在研究 但尚未找到解决方案 我已经尝试过这个 可以禁用 Bootstrap 中的选项卡吗 https stackoverflow com questions 9237314 can you disab
  • 单击回车键上的锚标记链接

    我有一个像这样的锚标签 a class btn btn danger href Continue a 它位于弹出窗口内 我需要按 Enter 键单击此链接 我尝试过以下代码 但它对我不起作用 document ready function
  • Django:管理中的 AJAX ManyToManyField

    我要显示ManyToManyFields 在 admin 中就像filter horizontal确实如此 但会在用户在过滤器字段中键入内容时填充选项 有很多选项 一次性加载它们需要很多时间 I found django ajax 过滤字段
  • 如何删除除任何特定 id 之外的元素

    假设有一个父 id 其中包含许多元素 我想删除除一个元素之外的所有元素 ex parent id children not id n remove
  • 在特定页面上执行 javascript 的正确“Rails”方式

    我试图在特定页面上运行 javascript 而我唯一的解决方案似乎是反模式 我有controller js内部生成的assets javascripts 我在用着gem jquery turbolinks 我的代码类似于以下内容 docu
  • 过滤自定义选择器是否大于 jQuery 中的数字[重复]

    这个问题在这里已经有答案了 快给你一份 我查看了 jQuery com 中的选择器 但找不到按大于数字的选择器进行过滤的方法 我想做这个 level gt 4 hide 我的 html 看起来像这样 div Test div 如何使用该语法
  • 自动建议 php 的 ajax

    我有一个 html 表单 php 脚本和 jquery 我需要一个 ajax 代码来从我的 php 脚本中进行自动建议 以下是代码 表单 html
  • javascript 选择自定义光标 (svg)

    我正在动态地将光标更改为悬停时的本地 svg element on mouseover function this css cursor url svgs pointer svg 9 30 auto 工作正常 但我想选择该 svg 来操纵其
  • PHP 数组通过 JSON 转为 jquery 数组

    我有点困惑为什么以下不起作用 get php
  • 表单发布请求并存储收到的数据

    我有一个非常简单的表单 在提交时发出发布请求
  • 覆盖 jQuery 验证 MVC4 中的默认设置

    要覆盖查询验证插件 请在文件 http docs jquery com Plugins Validation validate toptions 推荐的方式是 selector validate invalidHandler functio
  • 将数组从 jquery ajax 传递到代码后面

    我必须将二维数组传递给在asp net网页代码后面编写的页面方法我有一个变量objList作为二维数组 我使用以下代码来实现此目的 但没有成功 并且未调用页面方法 脚本语言 function BindTable objList ajax u

随机推荐

  • 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第三方插件