MVC+Layui 多选下拉框xmSelect

1、选择layui拓展第三方组件找到xmselect

xmSelect下拉多选 xmSelect - Layui 第三方扩展组件平台 (layuion.com)

下载后放到项目文件中

2、项目引用js文件

 <script src="~/Content/dist/xm-select.js"></script>

3、html添加表单设置id

  <div class="layui-form-item">
        <label class="layui-form-label">物料类型:</label>
        <div id="seltype" style="width:280px;margin-left:80px;"></div>
    </div>

 4、js添加数据

1、基本样式

 var options = {
        el: '#seltype',
        //name: 'xmselectName',//表单的name属性
        layVerify: 'required',//必填项
        //layVerType: 'tips',//提示类型 同layui
        toolbar: {//工具条,全选,清空,反选,自定义
            show: true,
            list: [
                'ALL',
                'CLEAR',
                'REVERSE'
            ]
        },
        data: [],//存放数据
        filterable: true,//搜索功能
        autoRow: true,//选项过多,自动换行
        //initValue: ['shuiguo','shucai'],//默认初始化,也可以数据中selected属性
        //language: 'zn',//语言包
        // repeat: true,//是否支持重复选择
        //max: 2,//最多选择2个
        // template({ item, sels, name, value }){
        //    //template:自定义下拉框的模板
        //     return item.name  + '<span style="position: absolute; right: 10px; color: #8799a3">'+value+'</span>'
        // },
    };

2、关联组件

var seltype = xmSelect.render(options);

3、ajax追加数据

 var getmateriallist = function () {
        $.ajax({
            url: 'XXX',
            type: "Get",
            success: function (res) {
                if (res.length > 0) {//注:仅支持name value
                    seltype.update({ data: res })
                }
            }
        })
    }

5、读取多选下拉框的值

var list=seltype.getValue();

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

鸿蒙开发已解决-arkts编译报错-arkts-limited-stdlib错误

文章目录 项目场景:问题描述原因分析:解决方案:适配指导案例此Bug解决方案总结项目场景: arkts编译报错-arkts-limited-stdlib错误。 我用Deveco studio4.0 beta2开发应用,报arkts-limited-stdlib错误 报错内容为: ERROR: ArKTS:ERROR File: D:/prRevivw/3792lapplica…

大数据毕业设计:图书推荐系统+可视化+Django框架 图书管理系统 (附源码+论文)✅

毕业设计&#xff1a;2023-2024年计算机专业毕业设计选题汇总&#xff08;建议收藏&#xff09; 毕业设计&#xff1a;2023-2024年最新最全计算机专业毕设选题推荐汇总 &#x1f345;感兴趣的可以先收藏起来&#xff0c;点赞、关注不迷路&#xff0c;大家在毕设选题&#xff…

UI自动化Selenium iframe切换多层嵌套

IFRAME是HTML标签&#xff0c;作用是文档中的文档&#xff0c;或者浮动的框架(FRAME)。iframe元素会创建包含另外一个文档的内联框架(即行内框架)。 简单来说&#xff0c;就像房子内的一个个房间一样&#xff1b;你要去房间里拿东西&#xff0c;就得先开门&#xff1b; 如上图…

java物品检验管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 java Web 物品检验管理系统是一套完善的java web信息管理系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为 TOMCAT7.0,Myeclipse8.5开发&#xff0c;数据库为Mysq…

中小企业低成本如何进行推广?媒介盒子解答

数字化时代下&#xff0c;用户想要购买产品的第一步都是在网上查询相关信息&#xff0c;因此对于中小企业来说&#xff0c;怎么把自己曝光到网上&#xff0c;怎么可以让用户搜到类似关键词时名列其中是企业需要考虑的问题&#xff0c;今天媒介盒子就来和大家聊聊&#xff1a;中…

基于ZU19EG的100G-UDP解决方案

概述 本文档介绍ZU19EG与Mellanox CX6 100G网卡通信解决方案。 环境配置 FPGA硬件&#xff1a;519-ZU19EG的4路100G光纤PCIe加上计算卡 电脑&#xff1a;国产国鑫主板&#xff08;双PCU&#xff09;&#xff1a;Gooxi G2DA-B CPU:Intel Xeon Silver 2.2GHz 内存&#xff1…

CHS_03.1.3.3+系统调用

CHS_03.1.3.3系统调用 系统调用什么是系统调用&#xff0c;有何作用&#xff1f;系统调用又和普通的库函数的调用又有一定的区别为什么系统调用是必须的系统调用 按功能分类 可以分为这样的一些系统调用系统调用过程 这个小节的全部内容 系统调用 相关的知识 我们会为大家介绍什…

鉴源论坛 · 观模丨浅谈Web渗透之信息收集(下)

作者 | 林海文 上海控安可信软件创新研究院汽车网络安全组 版块 | 鉴源论坛 观模 社群 | 添加微信号“TICPShanghai”加入“上海控安51fusa安全社区” 信息收集在渗透测试过程中是最重要的一环&#xff0c;“浅谈web渗透之信息收集”将通过上下两篇&#xff0c;对信息收集、…

AI老照片修复-Bringing-Old-Photos-Back-to-Life

&#x1f3e1; 个人主页&#xff1a;IT贫道-CSDN博客 &#x1f6a9; 私聊博主&#xff1a;私聊博主加WX好友&#xff0c;获取更多资料哦~ &#x1f514; 博主个人B栈地址&#xff1a;豹哥教你学编程的个人空间-豹哥教你学编程个人主页-哔哩哔哩视频 目录 1. AI老照片修复原理-…

mysql查询优化策略

exist和in的区别 其实很多人都搞不清什么时候用exist什么时候用in&#xff0c;前提是有索引&#xff08;比如A.cc和B.cc&#xff09;&#xff0c;选择的标准是看表的大小。 总体宗旨试小表驱动大表&#xff0c;具体来说&#xff1a; 可能有点懵逼&#xff0c;让我们来捋下两者…

注意力机制简单理解

1. 什么是注意力机制&#xff1f; ​ 我们在日常的生活中对许多事物都有我们自己的注意力重点&#xff0c;通过注意力我们可以更加关注于我们注意的东西&#xff0c;从而过滤不太关注的信息。 看到一张人像图时&#xff0c;我们会更关注人的脸部&#xff0c;其次根据脸部再细分…

文件vcruntime140.dll找不到该怎么办?分析解决vcruntime140.dll

最近许多用户都说他们的电脑出现了一个提示&#xff0c;显示vcruntime140.dll文件缺失。你可能想知道这个突然出现的问题是怎么回事。实际上&#xff0c;这种情况通常意味着你的电脑中的vcruntime140.dll文件已经丢失了。这个DLL文件对于电脑上很多程序的运行至关重要&#xff…

Vue-9、Vue事件修饰符

1、prevent 阻止默认事件 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>事件修饰符</title><!--引入vue--><script type"text/javascript" src"https://cdn.jsdeliv…

websocket: 了解并利用nodejs实现webSocket前后端通信

目录 第一章 前言 1.1 起源 1.2 短轮询与长轮询 1.2.1 短轮询 1.2.2 长轮询 1.2.3 长连接&#xff08;SSE&#xff09; 1.2.4 websocket 第二章 利用Node以及ws创建webSocket服务器 2.1 创建ws服务器&#xff08;后端部分&#xff09; 2.1.1 了解一下 2.1.2 代创建W…

【mysql】—— 用户管理

目录 &#xff08;一&#xff09;为什么要有用户管理&#xff1f; &#xff08;二&#xff09;用户 2.1 查看用户信息 2.2 创建用户 2.3 删除用户 2.4 修改用户密码 &#xff08;三&#xff09;数据库的权限 3.1 给用户授权 3.2 回收权限 &#xff08;一&#xff09;为…

SEO 分步教程:初学者掌握的 8 个简单基础知识

如果您刚刚开始使用搜索引擎优化 &#xff08;SEO&#xff09;&#xff0c;那么分步 SEO 教程是有序的。在这一点上&#xff0c;你可能已经听说过一些基本术语&#xff0c;如关键词研究和页面优化。但是&#xff0c;您如何应用迄今为止收集的所有知识呢&#xff1f; 如果您刚刚…

EndNote20 下载与安装详细教程

扫描文末二维码&#xff0c;关注微信公众号&#xff1a;ThsPool 后台回复 a004 &#xff0c;免费领取 EndNote20下载安装包 EndNote是一款备受欢迎的文献管理软件&#xff0c;被数百万研究人员、学生和图书管理员广泛使用。它提供便捷的方式来扩展各种语言的参考书目&#xff0…

计算机网络——应用层(2)

计算机网络——应用层&#xff08;2&#xff09; 小程一言专栏链接: [link](http://t.csdnimg.cn/ZUTXU) Web和HTTP概念解读HTTPHTTP请求和响应包含内容常见的请求方法Web缓存优点缺点 总结 DNS提供的服务 小程一言 我的计算机网络专栏&#xff0c;是自己在计算机网络学习过程…

鸿蒙系列--属性动画

一、定义 当组件的通用属性发生改变时而产生的属性渐变效果 说明&#xff1a; 当组件的通用属性发生改变时&#xff0c;组件状态由初始状态逐渐变为结束状态的过程中&#xff0c;会创建多个连续的中间状态&#xff0c;逐帧播放后&#xff0c;就会形成动画 二、创建 给组件(如…

智能时代:自然语言生成SQL与知识图谱问答实战

语义解析 前言语义解析的应用场景总结概论语义解析和大模型的关系延伸阅读 前言 语义解析技术可以提高人机交互的效率和准确性&#xff0c;在自然语言处理、数据分析、智能客服、智能家居等领域都有广泛的应用前景。特别是在大数据时代&#xff0c;语义解析能够帮助企业更快速…