Layui下拉多选框

news2024/12/22 18:19:30

标题xmSelect插件:

xmSelect文档
下载Layui第三方插件

下拉多选框效果:

在这里插入图片描述

实现方法(例子):

将xmSelect插件的xm-select.js文件引入到layui中:

<script src="public/js/xm-select/xm-select.js"></script> //xm-select.js文件所在目录

使用方法:
HTML:

<div class="layui-row">
	<div id="demo1" class="xm-select-demo" ></div>
    <pre id="demo1-value"></pre>
</div>

JS:
var demo1 = xmSelect.render({
	el: '#demo1',
    language: 'zn',
    data: dataArr
});

//更新下拉多选框默认的文本
demo1.update({
    tips: '请选择需要备份的分区'
});

var selectArr = demo1.getValue();
//判断下拉多选框中是否有选项
if (selectArr.length == 0) {
    layui.layer.alert('备份分区未选择', { icon: 5 });
}

//遍历下拉多选框所有选项
else {
    var valuesArr = [];
    for (var i = 0; i < selectArr.length; i++) {
        valuesArr.push(selectArr[i].value);
    }
    //对数据进行处理
    console.log(valuesArr); 
}
                

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

借助 Mybatis 的动态 SQL 解决传参不确定问题

在上一篇的&#xff1a;Mybatis 操作数据库的基本 CRUD 以及查询操作详析_糊糊涂涂的博客-CSDN博客中介绍了Mybatis使用固定SQL语句操作数据&#xff0c;本篇介绍 Mybatis 一个强大的特性&#xff1a;动态SQL。 动态 SQL 解决什么问题&#xff1f; 那当我们要执行的业务逻辑有…

carla与g29联合调试(一)

前言&#xff1a; 之前做的carla与g29的联合调试&#xff0c;现在记录一下carla控制g29的实现流程。 一、总体通讯流程 主要实现为carla中车辆的方向盘转动带着g29跟着一起转动&#xff0c;使用ros通讯来实现这个过程。 二、具体实现流程 2.1首先确定g29的力反馈和转动 使…

基于LoRA微调部署Stable Diffusion【免费试用阿里云】

文章目录 Stable Diffusion介绍环境及资源准备过程注交互式建模&#xff08;PAI-DSW&#xff09;的试用在创建的工作空间中创建实例安装 Diffusers Stable Diffusion介绍 Stable Diffusion 是一种文本到图像的潜在扩散模型&#xff0c;由 Runway 和慕尼黑大学合作构建&#xf…

学习day52

1.关于 error Component name "School" should always be multi-word vue/multi-word-component-names 这里是因为脚手架的规范原因&#xff0c; 解决办法&#xff1a; 我是在vue.comfig.js文件中加入了一条配置&#xff0c;即 lintOnSave:false 整个文件的完整…

Spring Boot单元测试入门指南

Spring Boot单元测试入门指南 JUnit是一个成熟和广泛应用的Java单元测试框架&#xff0c;它提供了丰富的功能和灵活的扩展机制&#xff0c;可以帮助开发人员编写高质量的单元测试。通过JUnit&#xff0c;开发人员可以更加自信地进行重构、维护和改进代码&#xff0c;同时提高代…

(学习笔记)如何理解TCP是面向字节流的协议,UDP是面向报文的协议?

如何理解字节流&#xff1f; 之所以会说TCP是面向字节流的协议&#xff0c;UDP是面向报文的协议&#xff0c;是因为操作系统对TCP和UDP协议的发送方的机制不同&#xff0c;也就是问题原因在发送方 为什么UDP协议是面向报文的协议&#xff1f; 当用户消息通过UDP协议传输时&…

从原理到实践,分析 Redisson 分布式锁的实现方案(二)

上篇讲解了如何用 Redis 实现分布式锁的方案&#xff0c;它提供了简单的原语来实现基于Redis的分布式锁。然而&#xff0c;Redis作为分布式锁的实现方式也存在一些缺点。本文将引入Redisson来实现分布式锁。 一、Redisson是什么 Redisson是一个基于Redis的分布式Java框架。它提…

flutter(01) windows桌面版 编译环境安装指南

1 flutter环境安装 flutter官网参考&#xff1a;Install | Flutter 先下载flutter SDK>&#xff1a;flutter sdk下载--官网&#xff0c;之后解压到C:\Users\XXX\data&#xff08;这里以该路径为例&#xff0c;但可以为其他自定义路径&#xff09;目录下&#xff0c;在这里…

5.python设计模式【单例模式】

内容&#xff1a;保证一个类只有一个实例&#xff0c;并提供一个访问它的全局访问点角色&#xff1a; 单例&#xff08;Singleton&#xff09; UML图 举个例子&#xff1a; 需求&#xff1a;一个类只能实例化一个对象&#xff0c;不能实例化多个对象 from abc import abstract…

MATLAB与ROS联合仿真——ROS环境搭建及相关准备工作(上)

本篇文章主要介绍在安装完ROS后&#xff0c;在进行MATLAB与ROS联合仿真之前&#xff0c;需要进行的一些环境搭建以及准备工作&#xff0c;主要分为 创建ROS工作空间及功能包、必备功能包安装、安装Gazebo11、导入实验功能包至工作空间、安装Visual_Studio_Code(选做)、常用便捷…

python 面向对象 - 类 - 实例 - 类的使用 - self - init方法 - ATM面向对象实验

目录 面向过程和面向对象的对比&#xff1f; 面向对象 面向对象两个重要概念&#xff1a; > class&#xff08;类&#xff09;、实例 类&#xff1a;具有相同属性或方法的对象的集合 属性(变量)&#xff1a;编号、位置、余额 方法&#xff08;函数&#xff09;&#xf…

[论文阅读笔记24]Social-STGCNN: A Social Spatio-Temporal GCNN for Human Traj. Pred.

论文: 论文地址 代码: 代码地址 作者在这篇文章中直接用GNN对目标的轨迹时空特征进行建模, 并用时序CNN进行预测, 代替了训练难度较大和速度较慢的RNN类方法. 0. Abstract 行人轨迹预测是一个比较有挑战性的任务, 有着许多的应用. 一个行人的轨迹不仅是由自己决定的, 而且受…

Vue消息订阅与发布

引入第三方库pubsub.js: npm i pubsub-js Student.vue import pubsub from pubsub-jsmethods:{sendStudentName(){// this.$bus.$emit(hello,this.name)pubsub.publish(hello,666)}}, School.vue import pubsub from pubsub-jsmounted() {// console.log("school&quo…

【监控系统】Promethus的查询PromQL详解及案例实战

首先我们先来了解一下什么是PromQL。 PromQL是Prometheus提供了内置的数据查询语言PromQL&#xff0c;全称为Prometheus Query Language。PromQL是对指标(Metric)的查询/聚合/过滤的处理&#xff0c;Metric的语法格式 <metric name>{<label name><label value&…

优维低代码实践:添加构件

优维低代码技术专栏&#xff0c;是一个全新的、技术为主的专栏&#xff0c;由优维技术委员会成员执笔&#xff0c;基于优维7年低代码技术研发及运维成果&#xff0c;主要介绍低代码相关的技术原理及架构逻辑&#xff0c;目的是给广大运维人提供一个技术交流与学习的平台。 优维…

Mac 安装启动RabbitMq

使用HomeBrew安装 未安装的请参照我的这篇Mac安装HomeBrew文章 安装 执行命令 brew install rabbitmq启动方式 brew services start rabbitmq端口说明 端口用处5672RabbitMQ通讯端口&#xff0c;也就是连接使用的端口15672RabbbitMQ管理界面端口&#xff0c;需要开启Manage…

区块链实验室(10) - 实例说明PBFT的共识过程

前面描述过PBFT的仿真方式&#xff0c;见区块链实验室(3) – 用Go语言仿真PBFT算法&#xff0c;本文以上述仿真程序说明PBFT的共识过程。 为叙述方便&#xff0c;首先给出1个简化的网络&#xff0c;共4个节点&#xff0c;构成如下图所示的网络。这样的网络可以避免冗余的网络报…

ASEMI快恢复二极管SFP6012A参数, SFP6012A规格

编辑-Z SFP6012A参数描述&#xff1a; 型号&#xff1a;SFP6012A 最大峰值反向电压(VRRM)&#xff1a;1200V 平均整流正向电流(IF)&#xff1a;60A 非重复峰值浪涌电流(IFSM)&#xff1a;500A 工作接点温度和储存温度(TJ, Tstg)&#xff1a;-40 to 175℃ 最大热阻(RθJC…

链动2+1营销系统开发模式深度解析

链动21模式其实是一种针对快消品行业的营销模式&#xff0c;主要逻辑就是用薄利多销丰厚返利的方式来吸引客户&#xff0c;同时快速裂变团队。 这个模式的玩法也很简单&#xff0c;只有代理和老板两种身份&#xff0c;代理身份是用户购买499元产品可以解锁&#xff0c;同时享受…

【压测指南|压力测试核心性能指标及行业标准】

文章目录 压力测试核心性能指标及行业标准指标1&#xff1a;响应时间指标2&#xff1a;吞吐量&#xff08;TPS)指标3&#xff1a;失败率总结&#xff1a; 压力测试核心性能指标及行业标准 在做压力测试时&#xff0c;新手测试人员常常在看报告时倍感压力&#xff1a;这么多性能…