开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

select2多选框只接受数组中最后选定的值

select2是一个基于jQuery的选择框插件，可以实现多选功能。对于select2多选框只接受数组中最后选定的值的问题，可以通过以下方式解决：

确保select2初始化时设置了multiple属性，以支持多选功能。
在select2的change事件中，获取选中的值，并将其存储到一个数组中。
当选中新的值时，更新数组中对应的值，保持数组中只有最后选定的值。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
</head>
<body>
  <select id="mySelect" multiple>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
  </select>

  <script>
    $(document).ready(function() {
      var selectedValues = []; // 存储选中的值的数组

      $('#mySelect').select2(); // 初始化select2

      $('#mySelect').on('change', function() {
        var selectedOptions = $(this).val(); // 获取选中的值

        if (selectedOptions.length > 0) {
          selectedValues = selectedOptions; // 更新选中的值数组
        }
      });
    });
  </script>
</body>
</html>

在上述示例中，我们使用了select2插件，并设置了multiple属性以支持多选。在change事件中，我们获取选中的值，并将其存储到selectedValues数组中。每次选中新的值时，我们更新数组中的值，以保持数组中只有最后选定的值。

对于腾讯云相关产品和产品介绍链接地址，由于要求不能提及具体品牌商，我无法提供相关链接。但腾讯云作为一家知名的云计算服务提供商，提供了丰富的云计算产品和解决方案，可以通过腾讯云官方网站进行了解和查找相关产品。

相关搜索:Angular中的复选框在提交时不接受最新值 Django中数组的复选框值 foreach循环只输出数组中的最后一个元素 JS - Object属性不接受赋值，而只获取数组的最后一个值 Vuex commit只提交响应中数组的最后一个值 Yii2 Select2 - update -连接表上的选定值(多对多)为什么我的python for循环只接受循环的最后一个值使用for循环替换矩阵中的值，但只保留最后替换的值在Javascript中获取复选框的合计值和下拉列表的选定值？在Java中，JsonArray只接受for循环内的最后一个JsonObject

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

介绍个前端框架，不是Bootstrap！

摘要总结：本文介绍了前端框架Bootstrap和Materializecss，以及如何在React中使用React-Bootstrap和react-materialize来提高前端开发效率和用户体验。

13. 快速上手！HarmonyOS4.0 Form（Checkbox_CheckboxGroup_Radio_TextInput_TextArea）表单详解

代码中用Flex 包裹了foreach，主要的原因是 Flex 是支持换行的，因此这么操作另外 Text 组件和 Checkbox 组件用 Row 包裹的原因，主要是防止 justifyContent:FlexAlign.SpaceBetween 的影响

00

实习第六周

https://stackoverflow.com/questions/11872832/how-to-respond-to-clicks-on-a-checkbox-in-an-angularjs-directive

02

让 js 中的 if 判断如丝般顺滑

项目中的一个小需求点，点击按钮，验证几十个条件框，判断所有条件框是否填写（选择）过数据（至少有一个条件判断为真）再执行对应操作

02

HarmonyOS-UIAbitity-Checkbox——【坚果派-红目香薰】

Checkbox( options?: {name?: string, group?: string} )

01

下拉菜单11+原生js获取select下拉框的selected的option项

想必大家在开发过程中也遇到类似问题，如果直接将js获取的数组传给后台，后台是无法区分数组的，因为js数组如果是二维的就是这样的：1,张三,23,2,李四,26

04

超实用多选框 checkbox 功能——全选、不选、反选等功能的数据驱动 JS 实现

对多选框实现全选、不选、反选是一个常见的功能，尤其是在外面使用了 vue 或者 react 等前端框架之后，仅仅是需要数据处理，我相信各位朋友都已经烂熟于心了。但是我近日遇到一个需求，琢磨了一下实现了。我感觉这段代码有分享的价值，因此编撰此文，与诸君分享。

01

HTML详解连载（3）

本专栏是自己学前端的征程，纯手敲的代码，自己跟着黑马课程学习的，并加入一些自己的理解，对代码和笔记进行适当修改。希望能对大家能有所帮助，同时也是请大家对我进行监督，对我写的代码进行建议，互相学习。

02

Vue常用特性-表单基本操作和表单修饰符

1.表单基本操作 1基于Vue的表单操作 Input 单行文本 textarea 多行文本 select 下拉多选 radio 单选框 checkbox 多选框

02

按键精灵中的UI界面操作

按键精灵的UI控件代码全是中文的，而且只能设置一些简单的样式，这一点比Auto.js差很多。

04

layui 表单请求参数对象和数组同时传递向后台转载请标明地址谢谢！

因为页面中的数据使用layui的form模块获取值，formData对象无法直接将多选框的值加入请求头，所以先将获取的多选按钮的值转为数组，然后使用

02

小程序多选和单选组件的封装

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55

01

Java Web之Servlet获取表单值

Java Web开发中，最常用的就是在后台获取前台的参数，经典的案例就是 JSP 表单传值到后台的 Servlet，然后在 doGet 或者 doPost 中获取，这里把常用参数获取总结一下一个典型的jsp表单如下 <form action="WorldServlet" method="post" enctype="multipart/form-data"> 用户名:<input type="text" name="username"/>
密码:<input ty

04

浅谈 Angular 项目实战

我不是 Angular 的布道者，但如今自称 Angular 派，使用 Angular 做项目让我有一种兴奋感。目前的三大主流前端框架都研究过，博客中也有三者的相关教程，最早接触的是 React，但是并没有实际的项目经验，只做过一些 Demo 。使用 Vue 做过一个比较复杂的移动端大数据项目，技术栈采用 Framework7 + Vue + Vuex，整体效果还是满意的。

00

带多选框的下拉列表「建议收藏」

之前想写一个带多选框的下拉列表，然后找相关的内容，发现大多都是用select写的，这种是默认的下拉列表样式，但有时候需要自己来写样式，这样用select就不合适了。

03

HTML-form标签学习

ml> <head> <title>form标签学习</title> <meta charset="UTF-8"/> </head> <body>

00

【JavaWeb】85：jQuery的各种选择器

jQuery语法的简洁之处就是在于此：如果是使用js语法，得到的元素为一个数组，所以要使用for循环依次赋值。

02

form标签学习

<html> <head> <title>form标签学习</title> <meta charset="UTF-8"/> </head> <body>

02

Django框架获取form表单数据方式总结

名字：<input type=”text” name=”name” <br <br

02

layui 实现下拉多选功能 [xm-select]

背景近期负责的管理后台，有下拉多选的业务需求通过网上的经验搜索，发现 xm-select 是个非常不错的选择并且，当前的后台使用的正是 layui 前端框架所以，在此整理一下对下拉多选功能【xm-select 】的使用步骤欢迎指摘 … ▷ 使用步骤参考使用文档，根据本人实际操作步骤，在此描述如下： ①. html 代码此处摘取核心代码如下（前端框架使用的是【layui】）

02

python-selenum3 第六天

1.循环遍历所有的下拉列表值 2.单选下拉列表 3.多选择列表的选中与取消 4.操作单选框、多选框以及断言及全部选中 5.断言页面源码中的关键字 6.截屏 7.拖拽页面元素

01

Django Xadmin多对多字段过滤实例

在xadmin中是不能像原生admin那样使用formfield_for_manytomany方法来过滤多对多字段

02

jquery获取select多选框选中的值

select下拉框选中的值，用jquery大家应该都会获取， $("#selectBox option:selected").val(); 如果select是多选的，也这么获取的话，则只能获取到第一个选项的value值，但是有一个神奇的发现，如果是： $("#selectBox option:selected").text(); 获取text，则可以直接打印出选中的两个选项的文本值的相连字符串，而不是只是第一个的text......... 获取多选框的value值，使用遍历最简单： $("#selectBo

02

select2 使用教程（简）「建议收藏」

用了这么久的Select2插件，也该写篇文章总结总结。当初感觉Select2不是特别好用，但又找不到比它更好的下拉框插件。

02

jQuery 获取多选框值,以及多选框中文的函数实践 by FungLeo

搜索了几个方法,好像都有错误,不知道是别人的错误,还是我的错误.因此,我自己构造了以下方法,便于我在实践中使用.

02

BootStrap干货篇之表单

作者说本人秉着方便他人的想法才开始写技术文章的，因为对于自学的人来说想要找到系统的学习教程很困难，这一点我深有体会，我也是在不断的摸索中才小有所成，如果你们觉得我写的不错就帮我推广一下，让更多的人看到。另外如果有什么错误的地方也要及时联系我，方便我改进，谢谢大家对我的支持

01

Html&Css 基础总结（基础好了才是最能打的）二

这是作者的第二天总结篇章，有需要的小伙伴可以在这里找到第一篇文章视频在这里~ @B站黑马程序员视频

01

jquery获取select多选框选中的值

如果select是多选的，也这么获取的话，则只能获取到第一个选项的value值，但是有一个神奇的发现，如果是：

01

reference preparation_Preferences

在上篇文章中我们讲述了Android 5.1 Settings的源码解析Android 5.1 Settings模块源码分析_Flying snow-CSDN博客，

01

JQuery 获取选中checkbox多选框的value，合并成数组传给后台

需求： JQuery 获取选中多选框的value，合并成数组传给后台在ajax请求的时候，需要给后端传一个参数 deviceId，这个 deviceId是一个list集合，也就是一个数组，需要把选中的几个数值放在这个数组里面，当做参数传递。

03

HTML进阶

标签：dl 嵌套 dt 和 dd，dl 是定义列表，dt 是定义列表的标题，dd 是定义列表的描述 / 详情。

04

React报错之You provided a `checked` prop to a form field

当我们在多选框上设置了checked 属性，却没有onChange 处理函数时，会产生"You provided a checked prop to a form field without an onChange handler"错误。为了解决该错误，可以使用defaultChecked 属性，或者在表单字段上设置onChange 属性。

03

vue 怎么将Checkbox 多选框选中的值提交

说好的学习计划来了，用十天的时间，深入了解一下饿了么的组件，简单的记录一下，首先上文档：

03

大型项目技术栈第七讲 Chosen的使用

Chosen是jquery下的一个下拉框插件。它能美化select选择框使其他变的更好看、更方便,同时它更扩展筛选的功能。它可对列表进行分组，同时也可禁用某些选择项。chosen插件使用起来很容易。有单选和多选，而且能监听事件及渲染。

04

vue 怎么将Checkbox 多选框选中的值提交

说好的学习计划来了，用十天的时间，深入了解一下饿了么的组件，简单的记录一下，首先上文档：

04

Cypress系列（21）- 可操作类型的命令之 check()、uncheck()

https://www.cnblogs.com/poloyy/category/1768839.html

02

jquery操作select(取值，设置选中）

最近工作中总出现select 和 option问题，整理一下，内容大部分源于网络资料

03

jquery操作select（取值，设置选中）

本文由小马哥创作，采用知识共享署名4.0 国际许可协议进行许可本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名

03

表单

1.表单控件 1.input标记 1.input标记提供文本输入框，密码输入框，按钮，单选按钮，多选按钮，文件上传框，隐藏域 2.属性 type:类型根据不同的type值，创建不同的输入框 value：输入框的值 name:给输入框起个名字(必须要写) disabled：禁止 3.具体的表单type值 1.文本框 <input type="text"/> 属性: value：输入框的值 maxlength:允许输入的最大长度 readonly:只读 2.密码框 <input type="password"/> 属性: value：输入框的值 maxlength:允许输入的最大长度 readonly:只读 3.单选框 <input type="radio"/> 属性 name属性的值必须一样(必须要加) checked:选中 4.多选框 <input type="checkbox"/> 5.按钮 1.普通按钮:button <input type="button" value="普通按钮"/> value属性 2.提交按钮:submit <input type="submit" value="提交按钮"/> 3.重置按钮:reset <input type="reset" value="重置按钮"/> 6.文件上传框:file <input type="file"/> 2.<textarea></textarea>标记 1.多行文本框 2.语法 <textarea></textarea> 3.属性 name:命名 cols:代表多少列 ----输入框显示做多显示列数 rows:代表多少行 ----输入框显示做多显示行数 readonly:只读 ---- 输入框的内容无法输入 3.select下拉标记 1.语法

03

回顾基础--HTML篇

01

Element UI极简教程(3)：Radio、Checkbox、Input组件的使用

Element UI 的 Radio 使用起来非常简单，直接使用 el-radio 标签即可，属性 v-model 表示该单选框绑定的对象，label 表示该单选框的值，代码如下所示：

02

接口测试平台代码实现129: 全局变量-8

如图，我准备先设置俩组变量。这里要明确一个概念，每个按钮代表的是一个变量组，而不是一个变量，一个用户可以拥有多套变量组，每组内可包含多个变量。用户在之后的使用时，可以对具体的项目，设置生效的变量组。生效后，该项目的接口中引入的变量，才会去该变量组中找到对应的值。这点设计和postman类似。

03

【收藏】这么多WEB组件(CSS)，攒一个网站够了吧？

总是喜欢简单又精致的东西，美的不繁复也不张扬。这是闷骚程序员的癖好么？闲来无事，把收集到的部分WEB组件整理汇总一下，攒一个逼格高一点的网站够了吧？

yii2组件之下拉框带搜索功能的示例代码（yii-select2）

简单的小功能，但是用起来还是蛮爽的。分享出来让更多的人有更快的开发效率，开开心心快乐编程。如果你还没有使用过composer，你可就out了，看我的教程分享，composer简直就是必备神奇有木有。都说到这个点上了，我们赶紧使用composer进行安装吧。不急，先来看看效果图是啥样的，不然都没心情没欲望看下去。

02

Element多选框组el-checkbox-group，重新勾选时不希望数组顺序被打乱

之前一直没注意到一个问题，就是el-checkbox-group选择的顺序是按照点击的多选框的顺序，而不是按照多选框的排列顺序。但是我们不希望它的顺序被打乱，有什么好的解决方案呢？

02

select2 api参数的文档

// 加载数据 $("#e11").select2({ placeholder: "Select report type", allowClear: true, data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}] }); // 加载数组支持多选 $("#e11_2").select2({ createSearchChoice:function(term, data) { if ($(data).filter(function() { return this.text.localeCompare(term)===0; }).length===0) {return {id:term, text:term};} }, multiple: true, data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}] }); function log(e) { var e=$("

"); $("#events_11").append(e); e.animate({opacity:1}, 10000, 'linear', function() { e.animate({opacity:0}, 2000, 'linear', function() {e.remove(); }); }); } // 对元素进行事件注册 $("#e11") .on("change", function(e) { log("change "+JSON.stringify({val:e.val, added:e.added, removed:e.removed})); }) // 改变事件 .on("select2-opening", function() { log("opening"); }) // select2 打开中事件 .on("select2-open", function() { log("open"); }) // select2 打开事件 .on("select2-close", function() { log("close"); }) // select2 关闭事件 .on("select2-highlight", function(e) { log ("highlighted val="+ e.val+" choice="+ JSON.stringify(e.choice));}) // 高亮 .on("select2-selecting", function(e) { log ("selecting val="+ e.val+" choice="+ JSON.stringify(e.choice));}) // 选中事件 .on("select2-removing", function(e) { log ("removing val="+ e.val+" choice="+ JSON.stringify(e.choice));}) // 移除中事件 .on("select2-removed", function(e) { log ("removed val="+ e.val+" choice="+ JSON.stringify(e.choice));}) // 移除完毕事件 .on("select2-loaded", function(e) { log ("loaded (data property omitted for brevity)");}) // 加载中事件 .on("select2-focus", function(e) { log ("focus");}) // 获得焦点事件 .on("select2-blur", function(e) { log ("blur");}); // 失去焦点事件 $("#e11").click(function() { $("#e11").val(["AK","CO"]).trigger("change"); }); 官网文档地址是：http://select2.github.io/select2/#documentation。说再多也没用，最后我们来个实例来证明一下ajax请求远程数据，以截图为准：

05

HarmonyOS-UIAbitity-CheckboxGroup——【坚果派-红目香薰】

CheckboxGroup( options?: { group?: string } )

01

删除多选框选中商品的内容_快速选择工具怎么删除选中部分吗

多选框的出现时将商品循环多次出现，这里用到了el表达式和jstl标签库的foreEach标签，注意input框加上class属性，并加上存有id的属性value：

03

你知道怎么测试搜索框吗？

一、功能实现： 1.搜索按钮功能是否实现； 2.点搜索后，原先的搜索条件是否清空；

01

JQuery 获取选中多选框的value，合并成字符串传给后台

<!DOCTYPE HTML> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>JQuery 获取选中多选框的value，合并成字符串传给后台</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭