使用多项选择select2选择选项后，立即显示所选选项的数量
基础概念
Select2 是一个 jQuery 插件，用于增强 HTML <select> 元素的功能，使其支持搜索、远程数据集、无限滚动等功能。它允许用户通过键盘或鼠标快速选择选项，并且可以自定义显示格式。
相关优势
- 搜索功能：用户可以在下拉列表中搜索选项，提高选择效率。
- 远程数据加载：可以从服务器动态加载选项，适用于大数据集。
- 自定义模板：可以自定义选项的显示方式，提升用户体验。
- 多选支持：支持多选功能，方便用户选择多个选项。
类型与应用场景
- 单选：适用于需要用户选择一个选项的场景。
- 多选：适用于需要用户选择多个选项的场景，如权限管理、标签选择等。
示例代码
以下是一个简单的示例，展示如何使用 Select2 并在选择选项后立即显示所选选项的数量。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Select2 Example</title>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
</head>
<body>
<select id="mySelect" multiple="multiple">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="cherry">Cherry</option>
<option value="date">Date</option>
</select>
<div id="selectedCount"></div>
<script>
$(document).ready(function() {
$('#mySelect').select2();
$('#mySelect').on('change', function() {
var selectedCount = $(this).val().length;
$('#selectedCount').text('Selected: ' + selectedCount);
});
});
</script>
</body>
</html>解释
- HTML部分：
- 创建一个
<select>元素，并设置multiple属性以支持多选。 - 添加一些选项供用户选择。
- 创建一个
- JavaScript部分：
- 使用 jQuery 初始化
Select2插件。 - 监听
change事件，当用户选择或取消选择选项时，计算所选选项的数量，并更新显示在页面上的#selectedCount元素中。
- 使用 jQuery 初始化
遇到的问题及解决方法
问题：选择选项后，所选选项的数量没有立即显示。
原因：
- 可能是没有正确绑定
change事件。 - 可能是
Select2插件没有正确初始化。
解决方法：
- 确保
Select2插件已正确加载并初始化。 - 确保
change事件已正确绑定到Select2实例。
通过上述示例代码和解释，可以确保在选择选项后立即显示所选选项的数量。
相关·内容
因此，我有一个多项选择select2，它通过数据库查询获得选项，我想在输入中显示所选择的选项的数量。然而，一旦他们被选中，我就想去做，但我不知道该怎么做。例如，如果我选择了2个选项，然后我决定再添加一个，我希望输入更改为选定的3个选项。感谢任何帮助，如果你有其他想法，比如我如何做类似的事情，但不像我所描述的那样，你的</
浏览 135提问于2020-04-07得票数 0
我的表单中有select2多选择字段，其中我希望在下拉列表被选中后从下拉列表中删除所选选项，如果从列表中删除它，再次将其添加到列表中。并且添加的项目也应该按照他们所选择的顺序排列。当前的select2 (4.0)没有删除所选的项目，而是按照下拉列表中显示的顺序显示所选的项目，
浏览 9提问于2016-04-17得票数 41
回答已采纳
我对jQuery select2插件的一个问题做了一些研究。select2在发布表单时对所选项目进行排序(无论您选择的顺序如何)。我知道这可能不是select2特有的错误，而是标准的html选择行为。
现在，我如何获得选定的项目ID，然后将它们放在隐藏输入中的逗号分隔列表中，这样我就可以尊重选择项目的顺序了？$("#formpacint").submit(fun
浏览 4提问于2014-09-12得票数 0
在我的asp.net项目中，我使用一个修改后的Listbox控件来显示多个选择下拉列表框，我使用Select2()直观地显示了这个选项；
我将AutoPostBack=设置为“True”，这样在每次操作之后但是，由于Select2 multple不改变<select>选项本身，因此ViewState无法识别所选项。我怀疑，如果选择带有
浏览 3提问于2013-04-03得票数 2
回答已采纳
当我将jquery select2附加到已经选择了选项的<select>时，下拉列表不会显示所选选项。如果我选择一个新的选项，关闭下拉，然后重新打开它，下拉列表显示选项。这里的小提琴示例：
注意选项列表是如何从顶部开
浏览 5提问于2016-04-12得票数 3
有没有办法防止在select2中显示多个值？
我需要的是，当显示select时，将显示所选值，但它们不会显示在select部分(在通常写入占位符的字段中)。我已经在插件的文档中找过了，但是我找不到获取它的选项。问题来自于选择了大量的选项，它使得选择显示在两行中，所以另一种解决方案可能是，它只显示</em
浏览 0提问于2020-09-06得票数 1
我有用于显示用户角色的带有多个选择的select2控件，并且我从服务器获取selectedRoles集合，而select2只需要所选项目的id，而不是整个集合。data-bind="options: AllRoles, optionsValue: 'Id', optionsText: 'Name', selectedOptions: selectedRole, select2: {}">
浏览 0提问于2013-04-04得票数 1
回答已采纳
2回答
我在一个带有的<select>上使用multiple="multiple"插件。我需要将值添加到所选的列表中(即不添加到所有选项，而是添加到所选选项，而不添加新选项)。我知道我可以用设置所选的选项或者
浏览 5提问于2013-06-04得票数 13
回答已采纳
由于一些原型的原因，我正在调整select2插件，特别是多重选择。-搜索-选择”应该显示选定的值VAL123，而不是文本。如果选择大于1，我需要显示一个自定义消息文本，就像选择的多个选项一样，而不是选项本身。理想情况下，选择还将避免从下拉列表中删除所选选项。我知道这似乎打破了插件的逻辑，并且可能无法用提供<em
浏览 2提问于2014-06-25得票数 0
回答已采纳
我使用select2 to ()来构建下拉列表。我在刷新页面后显示所选项目有问题(我的选择存储在数据库中)。我在哪里特别添加了select或selected="selected“？我不能添加这个，因为我的网站的每个用户都在他的设置中选择自己的项目。<script>$(".js-examp
浏览 2提问于2015-05-22得票数 0
我使用select2进行多选择，我有数组文本值。ex:我需要在我的select2下载后选择这两个值，我实现了使用单个值，但如何实现相同的使用数组的值，我在这个.anyone上，帮助我解决问题。document element;$("#strings
浏览 0提问于2020-05-20得票数 0
回答已采纳
我所拥有的感觉是，我想要一个select2下拉列表，允许用户选择多个选项。但是，当他们选择一个选项时，我希望有选择条来显示所选项目的缩写。现在，我有一个键值数组，其中键是缩写，值是全文。现在，当我选择一个选项时，我无法找到获取数组的“原始”键的方法。我也没有看到任何与数组的键相关的东西。，它将简单地使用数组的值
浏览 13提问于2019-10-14得票数 0
回答已采纳
我使用select2来显示多个选择组件。与其将关闭图标(X)显示在项目的左侧，不如将其移动到所选项目的右侧？
浏览 4提问于2016-08-12得票数 8
回答已采纳
4回答
我正在使用jQuery插件。如何使用jQuery选择所选选项的数据属性。这是代码 <option data-id="1" value="2"> CASE 1 </option>
<option data-id="2"<option data-id="3" v
浏览 5提问于2014-12-04得票数 0
回答已采纳
如何在django select2插件中提取所有选定项的列表？
因此，我在select2字段中选择了5个选项，我希望使用javascript并使用ajax调用将所选选项的列表传递给服务器。与常用的选择字段相反，它没有在选择上添加属性"selected“。
浏览 3提问于2014-09-02得票数 0
回答已采纳
我有一个用户可以选择的选择字段&我使用Select2进行多项选择。value="USD">USD - USA</option></select>
但问题是，如果我从列表中选择选项2，然后选择
浏览 11提问于2017-08-14得票数 0
回答已采纳
1回答
我在我的表单中有两个选择列表(select1和select2)，select2依赖于select2选择，当select1选择更改select2中的选项时，这个工作很好，但我的问题是更改时不返回到默认选项，它给我最后一次select2选择的索引，我想更改select2选项更改并将所选</
浏览 1提问于2016-10-27得票数 3
我遇到这样一种情况:选择一个选项，该选项是绑定到我的javascript数据对象的数据，结果是一个不同的选项显示为selected。,"t":"null"}, {"no":2,"t":"b"},
{"n
浏览 1提问于2015-03-18得票数 0
回答已采纳
我正在使用Select2 jQuery插件。当我使用多重下拉选项时。所选项目的结果在框中显示为标记，但我只想显示所选项目的数量。 <option value="6">Name6</option>
<option value="7">
浏览 0提问于2016-07-29得票数 18
1回答
我正在使用Select2插件开发一个多选下拉菜单。然而，我有一些风格问题，我似乎不能解决。我想我得玩玩这个选择<
浏览 0提问于2018-02-10得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
腾讯会议
云直播
对象存储活动推荐
腾讯云开发者
