1 先下载xm-select.js,如果layui.js中有就不用了,js中的xmSelect对象在引用xm-select.js后可以直接使用

2 添加多选下拉框标签

 <div class="layui-inline" style="width: 350px;"><label class="layui-form-label">行业类型:</label><div class="layui-input-inline"><div id="IndustryType" class="xm-select-demo" style="width: 300px"></div></div></div>

3 js上获取下拉数据

 $.ajax({Type: "post",url: "/Collect/getBid_ProjectType",success: function (res) {var res = JSON.parse(res);var dataIndustryType = [];for (var i = 0; i < res.data.length; i++) {if (res.data[i].reid == 3) {dataIndustryType.push(res.data[i]);}}webdata = xmSelect.render({el: '#IndustryType',tips: '请选择',prop: {name: 'name',value: 'id',},filterable: true,data: dataIndustryType,on: function (data) {var arr = data.arr;if (arr.length > 0) {//先查看arr中有没有空的数组元素for (var j = 0; j < arr.length; j++) {if (arr[j].id == undefined) {arr.splice(j,1);}}for (var i = 0; i < arr.length; i++) {if (oarr=="") {oarr += arr[i].id + ',';//寻找键值对赋值}else if (arr[i].id != undefined && oarr.indexOf(arr[i].id) < 0) {oarr += ','+ arr[i].id + ',';//寻找键值对赋值}}//选中项idoarr = oarr.substring(0, oarr.length - 1);}//记录选中项id$('#IndustryTypeid').val(oarr);},});//栏目选中,修改时获取之前的数据,设置选中var IndustryType = $('#oldIndustryType').val();var IndustryTypearr = IndustryType.split(',');for (var i = 0; i < IndustryTypearr.length; i++) {var a = IndustryTypearr[i];if (a != '0' && a != '') {//下面代码是 动态选中webdata.append([a]);}}$("#SourceAuthority").val($('#oldSourceAuthority').val());form.render();}})

layui多选下拉框,多选相关推荐

  1. layui多选下拉框

    HTML代码 <select class="param_belong" multiple="multiple" lay-filter="sele ...

  2. layui 使用xm-select实现下拉框多选

    记录:layui 使用xm-select实现下拉框多选 使用示例: <script src="__STATIC__/plugs/layui-v2.5.6/ext/xm-select.j ...

  3. layui多选下拉框,多选,使用xm-select插件

    1. layui的多选下拉框可以使用 xm-select 插件实现.使用步骤如下:1. 下载 xm-select 插件,并在页面中引入: html <link rel="stylesh ...

  4. select实现---多选下拉框

    select列表多选下拉框 注意:formSelects v4的一些操作: https://blog.csdn.net/zyc050707/article/details/109809503 1.引入 ...

  5. Angular实现虚拟滚动多选下拉框笔记

    要求: 实现一个angular多选下拉框组件,当有超过2000个选项时,滑动/挑选/全选均不卡. 正篇: 为了方便,这里不考虑扩展性,所以规定下拉框展开只显示7行数据,行高27px 约定:input为 ...

  6. yii框架的下拉框多选,设置默认值等(dropDownList)

    一.前言 根据需求,需要更改下拉框为多选框.本来以为只是很简单的东西,但是实际修改起来却碰到不少bug,多选框无法选中,给多选框赋默认值等.这里记录一下 二.修改单选下拉框为多选下拉框 echo $f ...

  7. bootstrap-select实现下拉框多选效果

    bootstrap-select实现下拉框多选效果 听语音 在学习bootstrap实现下拉多选效果的时候,觉得该效果很好,所以拿来分享下,这里就不详细的描述了,直接附上代码给各位看看 方法/步骤 1 ...

  8. html css 多选下拉框,jQuery多选下拉框插件

    jquery.multi-select.js是一款jQuery多选下拉框插件.该插件可以将select元素转换为带checkbox的多选下拉框,非常实用. 使用方法 在页面中引入下面的文件. lt;l ...

  9. jquery --- 多选下拉框的移动(穿梭框)

    效果如下: 几个注意地方: 1.多选下拉框需要添加 multiple 2.获取选中的元素KaTeX parse error: Expected 'EOF', got '#' at position 3 ...

  10. HTML多选mysql,html多选下拉框 | 学步园

    一个jquery ui,实现html的多选下拉框,在下拉里面加checkbox,不改变页面的提交特性,只是动态的改变select选中的多选数据. jsp页面例子: pageEncoding=" ...

最新文章

  1. 避免在JSP中写java代码
  2. 华为鸿蒙osbeta多场景展示,华为发布鸿蒙系统:全场景分布式OS
  3. zigbee之SampleApp_ProcessEvent()
  4. 基于R语言的梯度推进算法介绍
  5. sql server与oracle的分页,详解SQLServer和Oracle的分页查询
  6. Java 8 golang 1.8_Java8 新特性(一) - Lambda
  7. 怎么做性能测试--响应时间
  8. SVN 冲突文件详解
  9. 使用tp5.1 model返回数据 显示variable type error: array
  10. flt文件matlab,FLT文件扩展名 - 什么是.flt以及如何打开? - ReviverSoft
  11. GD32F103基础教程—硬件介绍(四)
  12. 机器学习如何帮助Caesars大涨邮件绩效
  13. SpringBoot 集成积木报表
  14. iOS 获取权限描述本地化
  15. netty 给指定用户推送消息_Netty实战:设计一个IM框架就这么简单!
  16. 压缩图片和改变图片图形
  17. 当远程工作成为未来的工作方式......
  18. 小常识:保险中的“保全”是什么?
  19. 在CentOS7上源码安装MongoDB 3.2.7
  20. IC笔试牛客网verilog刷题总结四

热门文章

  1. 知识付费的本质是什么?现在入行知识付费行业晚吗?
  2. springboot实现数据库数据导出生成Excel报表
  3. 亚马逊Dash永久下架:智能购物按钮究竟犯了什么错?
  4. 3D深度学习总结(聚焦3D深度学习的现在于未来)
  5. (十二):为什么需要一个新的ORM框架
  6. 计算机 蓝牙鼠标卡顿,蓝牙鼠标卡顿、漂移现象的解决方法
  7. 开源spider一览(zz)
  8. Streamset数据同步报错问题
  9. 微信小程序使用VANT filed 组件 input框内文字省略
  10. 中国金盐银盐行业研究与投资前景预测报告(2022版)