layui三方插件multiSelect实现下拉框多选踩坑纪实

最新推荐文章于 2024-05-13 16:47:38 发布
最新推荐文章于 2024-05-13 16:47:38 发布
阅读量6.5k 收藏
点赞数
分类专栏： 前端小技巧 文章标签： layui 选择器 multiSelect 下拉框 坑
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39071904/article/details/90510764
版权
在使用layui的multiSelect插件时，遇到下拉框多选的坑，由于对象name属性包含特殊字符导致jQuery选择器报错。分析源码后发现需对特殊字符进行转义。解决方案是对含有特殊字符的value值进行转义处理，以确保jQuery选择器能正确识别。提醒开发者使用第三方插件时要留意此类问题。
摘要由CSDN通过智能技术生成

今天在使用一个插件：multiSelect【多选列表】的时候，按照API操作，并封装成动态tpl组件后，显示结果却一直在报错。

场景：

如下格式的对象的数组

[

{
    "active": true,
 "avatarUrls": {
        "48x48": "https://www.gravatar.com/avatar/64e1b8d34f425d19e1ee2ea7236d3028?d=mm&s=48",
 "24x24": "https://www.gravatar.com/avatar/64e1b8d34f425d19e1ee2ea7236d3028?d=mm&s=24",
 "16x16": "https://www.gravatar.com/avatar/64e1b8d34f425d19e1ee2ea7236d3028?d=mm&s=16",
 "32x32": "https://www.gravatar.com/avatar/64e1b8d34f425d19e1ee2ea7236d3028?d=mm&s=32"
 },
 "displayName": "admin",
 "email": "admin@admin.com",
 "id": "",
 "name": "admin@admin.com",
 "self": "http://192.168.21.236:18080/rest/api/2/user?username=admin",
 "url": "http://192.168.21.236:18080/rest/api/2/us
最低0.47元/天 解锁文章
清风在畔_Koo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
multiselect选中_multiselect多选下拉框
weixin_36374366的博客
12-23 1007
具体实现//这个为隐藏域后台直接使用这个为参数${varStatus.count}------------------------------------------------------------------------------js代码实现 先设置页面一加载就执行该js方法$(function(){//初始化选中var selected = $("#q_dueDay").val();/...
jQuery实现下拉框多选 jquery-multiselect 的实例代码
10-21
主要介绍了jQuery实现下拉框多选 jquery-multiselect 的实例代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下
layui multiSelect 多选下拉框 事件监听
qq_36636312的博客
08-23 3015
1，效果图 2，代码 // 添加 multiple="multiple" <div class="layui-inline"> <select id="tabletype" name="tabletype" multiple="multiple" lay-filter="tabletypechange"> <option value="模型表">模型表</option> <option value
Layui下拉多选框
佳佳鸽的博客
07-24 4525
layui+xmSelect下拉多选框的实现
Layui 多选下拉框xmSelect
最新发布
L_YouUi的博客
05-13 1041
1.选择Layui第三方扩展组件。2.html页面添加。
基于layui的select选择框修改为多选框
weixin_44037153的博客
11-01 2646
layui-xm-select 的功能强大，可多选、可下拉树、下拉日期多选、下拉折叠面板、下拉穿梭框、级联模式。
layui下拉框select实现多选,并且编辑时候回显
weixin_54685622的博客
07-01 6605
这里主要记录一下配置，详情请进：添加链接描述 1、引入formSelects-v4的js、css 2、定义一个下拉框 3、js配置 注意：base: ‘/static/layui/js/’ 一定要与你引入的路径一致，并且写全，不然不起作用 参考网址：添加链接描述............
Vue elementUI-select多选下拉框数据回显成功后，点击下拉选项或删除回显数据无反应...
行云的博客
07-29 1922
在点击的过程中监听了的绑定值的变化,也改变了,但是下拉框是没有反应的感觉自己设定的值和element ui触发的绑定值有点不一样在添加的框中选中的值返回的不单单是一个数组还有些其他值,但是自己回显的数据只是一个普通值解决办法:方法一vm.$set当视图自动更新失败时，vue提供了set方法vm.$set(target,propertyName/index,va...
利用Bootstrap Multiselect实现下拉框多选功能
11-29
利用Bootstrap Multiselect实现下拉框多选功能,并在点击事件中获取到所有选中option的value值 首先展示项目案例: 多选下拉框功能实现.gif 下面是所有完整的代码,重点以及主要的解释已经在代码内进行注释: 引入的...
jquery.multiselect多选下拉框实现代码
11-26
本文实例为大家分享了jquery.multiselect多选下拉框的实现方法，供大家参考，具体内容如下 第一步：链接下列文件，如果没有，到此网页下载 https://github.com/ehynds/jquery-ui-multiselect-widget，此插件基于...
Multiselect：操作多选列表框
花飘万家雪
06-12 2957
Multiselect：操作多选列表框 helloweba.com 作者：月光光 时间：2010-10-09 11:44 标签： Multiselect  jquery插件  表单操作  Multiselect是一个采用jQuery实现的两边多选列表控件。可以将需要选定的项目从左边添加到右边的列表框中。或者将不需要的项目从右边列表框中删除。 查看演示DEMO下
layer 下拉树形菜单带有复选框
05-22
该插件是改良的layer的树形插件，在原始的layer插件中的树形结构是没有复选框的，改良后可用以拿来做权限系统的权限选择
LayUI树形下拉多选选择器扩展包
03-21
LayUI树形下拉多选选择器扩展包
jquerymultiselectjs是一款基于jQueryUI的多项选择下拉列表框组件
08-09
jquery.multiselect.js是一款基于jQuery UI的多项选择下拉列表框组件。该下拉列表功能强大，可以实现多选和单选，可制作打开和关闭下拉框时的炫酷动画效果，提供丰富的回调函数和其它方法。
multiple-Select.js
02-07
多选框要用到的js multiple-Select.js 用的时候引用到文件中
MultiSelect 多选
03-27
将后台数据编写为以下格式. <optgroup label="Group 1"> <option value="1-1">Option 1.1</option> <option value="1-2" selected="selected">Option 1.2</option> <option value="1-3" selected="selected">Option 1.3</option> </optgroup> <optgroup label="Group 2"> <option value="2-1">Option 2.1</option> <option value="2-2">Option 2.2</option> <option value="2-3">Option 2.3</option> </optgroup>
layui的select多选解决方案
u013251507的博客
01-31 2051
获取value字符串</button><button class="btn" id="value">获取value数组</button><button class="btn" id="name">获取name数组
Django 如何使用多选枚举。
m0_55837832的博客
07-20 1907
Django 如何使用多选枚举。 在Djngo orm 的使用过程中经常会遇到使用多选枚举的情况。但django 提供的models.CharField是单选的。咋办呢？提供两个思路，1、使用一对多，建立多张表实现。 2、第三方插件MultiSelectField库 先上案例： from multiselectfield import MultiSelectField # ... MY_CHOICES = (('item_key1', 'Item title 1.1'),
用layui实现下拉框多选，取值及赋值
热门推荐
qq_40247546的博客
09-21 3万+
首先需要的js及css，我是直接在官网上下载的 废话不多说，直接上代码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;layui下拉框多选&lt;/title&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0&qu
力软下拉框多选_jQuery实现下拉框多选 jquery-multiselect 的实例代码
05-27
下面是使用 jQuery 插件 jquery-multiselect 实现下拉框多选的示例代码： HTML 代码： ```html <select id="selectBox" multiple> <option value="option1">选项1</option> <option value="option2">选项2</option> <option value="option3">选项3</option> <option value="option4">选项4</option> <option value="option5">选项5</option> </select> ``` JavaScript 代码： ```javascript $(document).ready(function() { $('#selectBox').multiselect(); }); ``` 在上面的示例代码中，我们首先在 HTML 中定义了一个 ID 为 "selectBox" 的下拉框，并设置了 multiple 属性，表示该下拉框可以多选。 然后，在 JavaScript 中，我们使用 jQuery 的 ready() 方法来确保文档加载完成后再执行代码。在 ready() 方法中，我们调用了 multiselect() 方法来初始化下拉框，从而实现了下拉框多选的功能。 使用该插件可以让用户方便地选择多个选项，而不必使用 Ctrl 或 Shift 键来多选。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值