关键词：
【中文标题】如何使用配置了ajax搜索的select2 jquery插件实现选择所有功能。？【英文标题】：How to implement select all functionality with select2 jquery plugin configured with ajax search.? 【发布时间】：2017-09-05 02:18:30 【问题描述】：我目前使用 select2 jquery 插件从 ajax 调用动态填充的列表中选择数据。我需要实现全选功能，以便用户能够使用全选按钮一次选择所有选项。我试图在 jsfidde 中按照这个例子来实现这个。
Click here to see the jsfiddle
但是对于选择大量项目的列表说 500 项目。它会使浏览器挂起一段时间。请提出一种更好的方法来实现这一点，而不会出现任何性能问题。
$.fn.select2.amd.require([
'select2/utils',
'select2/dropdown',
'select2/dropdown/attachBody'
], function (Utils, Dropdown, AttachBody)
function SelectAll()
SelectAll.prototype.render = function (decorated)
var $rendered = decorated.call(this);
var self = this;
var $selectAll = $(
'<button type="button">Select All</button>'
);
$rendered.find('.select2-dropdown').prepend($selectAll);
$selectAll.on('click', function (e)
var $results = $rendered.find('.select2-results__option[aria-selected=false]');
// Get all results that aren't selected
$results.each(function ()
var $result = $(this);
// Get the data object for it
var data = $result.data('data');
// Trigger the select event
self.trigger('select',
data: data
);
);
self.trigger('close');
);
return $rendered;
;
$("select").select2(
placeholder: "Select Option(s)...",
dropdownAdapter: Utils.Decorate(
Utils.Decorate(
Dropdown,
AttachBody
),
SelectAll
),
);
);
【问题讨论】：
【参考方案1】：这是重复的问题 JQuery Select2 - How to select all options
为带有复选框的多选给出的解决方案。
如果它的负载比你应该添加额外的隐藏文件来获得逗号分隔值。
试试下面的代码。 HTML：
<select multiple id="e1" style="width:300px">
<option value="AL">Alabama</option>
<option value="Am">Amalapuram</option>
<option value="An">Anakapalli</option>
<option value="Ak">Akkayapalem</option>
<option value="WY">Wyoming</option>
</select>
<br>
<input type="checkbox" id="checkbox" >Select All
<br>
<input type="text" id="valueall" value="" name="valueall">
jQuery :
$("#e1").select2();
$("#checkbox").click(function()
if($("#checkbox").is(':checked') )
$("#e1 > option").prop("selected","selected");
<!-- $("#e1").trigger("change"); -->
$("#e1").select2('destroy');
$("#e1").hide();
$("#valueall").val($("#e1").val())
else
$("#e1 > option").removeAttr("selected");
<!-- $("#e1").trigger("change"); -->
$("#e1").select2();
$("#e1").show();
$("#valueall").val($("#e1").val())
);
您可以为输入字段设置 type="hidden"。
【讨论】：
是的，但是他说它工作正常，但是当我们选择更多 den 500 项时，这会使浏览器挂起。 @Parth 不，我需要确保浏览器不会在选择大量元素时挂起选择全部 @albert 为此，您还可以为全选设置一个复选框，在该复选框上禁用选择并以逗号分隔获取隐藏字段中的所有值。 @Parth 您能否为此实现提供一个有效的 jsfiddle。 ? @albert 我添加了示例代码。你可以试试这个。如何在 select2 类型提前搜索中设置选项值以及如何从 ajax 数据添加选项组
】如何在select2类型提前搜索中设置选项值以及如何从ajax数据添加选项组【英文标题】：Howtosetoptionvalueinselect2typeaheadsearchANDhowtoaddanoptiongroupfromajaxdata【发布时间】：2014-10-1007:47:08【问题描述】：我正在使用select2对几种不同类型... 查看详情
Select2 通过 AJAX 加载 JSON 结果集并在本地搜索
】Select2通过AJAX加载JSON结果集并在本地搜索【英文标题】：Select2loadJSONresultsetviaAJAXandsearchlocally【发布时间】：2014-10-0921:01:44【问题描述】：到目前为止，我一直在使用Select2的普通AJAX方法来搜索和过滤服务器端的数据，但现在... 查看详情
如何以编程方式将搜索查询注入 Select2 v4？
】如何以编程方式将搜索查询注入Select2v4？【英文标题】：HowtoprogrammaticallyinjectsearchqueriesintoSelect2v4?【发布时间】：2015-08-1114:02:41【问题描述】：我使用Select2搜索框构建了一个网络应用程序，它通过AJAX连接到我们的后端。搜索... 查看详情
如何设置select2 ajax预选值？
】如何设置select2ajax预选值？【英文标题】：Howtosetselect2ajaxpreselectedvalue?【发布时间】：2019-01-1504:40:18【问题描述】：目前我按照this的回答使Flask表单的Ajaxselectmultiple字段工作。这适用于事件创建表单。喜欢它通过api调用自动在... 查看详情
Select2 Ajax 不匹配结果
】Select2Ajax不匹配结果【英文标题】：Select2Ajaxnotmatchingresults【发布时间】：2016-04-1217:37:17【问题描述】：我的Select2表单使用ajax从数据库加载结果，但在前端，select2搜索返回所有结果，而不是特定于搜索词的结果。在做了一些... 查看详情
一个事件干扰了 Select2 插件的 ajax 检索结果
】一个事件干扰了Select2插件的ajax检索结果【英文标题】：AneventisinterferingwithSelect2plugin\'sajax-retrievedresults【发布时间】：2012-12-2100:51:09【问题描述】：我正在使用IgorVaynberg的Select2jQuery插件和InfiniteScrollwithRemoteData选项为我的网站... 查看详情
如果搜索文本只是空格，则 Select2 不应发送 ajax。如何做到这一点？
】如果搜索文本只是空格，则Select2不应发送ajax。如何做到这一点？【英文标题】：Select2shouldnotsendajaxifthesearchtextisjustemptyspaces.Howtoachievethat?【发布时间】：2014-12-0409:12:35【问题描述】：我有一个场景，当用户搜索空格时，我不... 查看详情
向 Select2 AJAX 控件添加搜索词选项
】向Select2AJAX控件添加搜索词选项【英文标题】：AddsearchtermoptiontoSelect2AJAXcontrol【发布时间】：2015-11-0213:57:47【问题描述】：我有一个使用AJAX的Select2控件-我可以搜索远程存储库并从中选择选项。不过，我想做的是每次AJAX搜索返... 查看详情
Select2 ajax不显示结果
】Select2ajax不显示结果【英文标题】：Select2ajaxnotshowingresults【发布时间】：2016-04-1023:18:05【问题描述】：我正在使用select2和ajax在我的数据库中查询某个分类下的术语，但是当我搜索搜索框时，它只是挂在“搜索”上而没有检索... 查看详情
使用 select2 与 ajax 调用 asp.Net 服务自定义参数
】使用select2与ajax调用asp.Net服务自定义参数【英文标题】：Usingselect2withajaxcalltoasp.Netservicecustomparams【发布时间】：2016-02-2009:27:42【问题描述】：我想使用select2jQuery插件，并想使用从ajax调用到aspx.netWebMethod的AutoComplete我的问题是... 查看详情
jquery - 如何使用通过 AJAX 从 MySQL 和 PHP 检索的数据将图像添加到 Select2 下拉列表？
...query-如何使用通过AJAX从MySQL和PHP检索的数据将图像添加到Select2下拉列表？【英文标题】：jquery-HowtoaddimagetotheSelect2dropdownlistwithdataretreivedfromMySQLandPHPthroughAJAX?【发布时间】：2020-04-1212:22:12【问题描述】：我想在我创建的可搜索下... 查看详情
在 jquery select2 中更改文本“搜索”
】在jqueryselect2中更改文本“搜索”【英文标题】：Changetext"searching"injqueryselect2【发布时间】：2019-09-1314:06:01【问题描述】：我正在使用带有ajax选项的select2，当ajax运行时，会出现一个文本“正在搜索”，直到ajax成功。我... 查看详情
如何在 Select2 中将参数附加到 ajax 请求？
】如何在Select2中将参数附加到ajax请求？【英文标题】：HowtoappendparamstoajaxrequestinSelect2?【发布时间】：2014-12-3004:44:11【问题描述】：我正在使用Laravel构建一个Web应用程序，我必须实现标签选择，就像***使用的这个，通过ajax加载... 查看详情
Select2 显示当前搜索的值
】Select2显示当前搜索的值【英文标题】：Select2ShowCurrentlySearchedValue【发布时间】：2017-03-0208:03:46【问题描述】：我正在使用Selec2框架通过ajax调用来执行此操作，我已在我的项目中成功实现了此功能，但是为什么当输入值进行搜... 查看详情
通过 Ajax 检索其数据的 select2 的编程选择
】通过Ajax检索其数据的select2的编程选择【英文标题】：Programmaticselectionofselect2whichretrievesitsdataviaAjax【发布时间】：2015-06-2415:21:00【问题描述】：我正在使用select24.0版，我正在尝试对选择框进行编程选择，该选择框从ajax调用中... 查看详情
如何在使用 qrcode 扫描后将数据插入 select2 搜索输入
】如何在使用qrcode扫描后将数据插入select2搜索输入【英文标题】：howtoinsertdataintoselect2searchinputafterscanusingqrcode【发布时间】：2021-05-2317:12:25【问题描述】：我想要的示例结果：我已经做了二维码扫描和select2。它工作正常。问题... 查看详情
Select2 忽略某些输入？
】Select2忽略某些输入？【英文标题】：Select2ignorecertaininput?【发布时间】：2014-07-0900:48:43【问题描述】：所以我使用基于Select2JQuery的替换选择框。我已经为通过ajax进行远程数据搜索进行了设置（在我找到的示例的帮助下），效... 查看详情
select2 4.0 AJAX 预填充如何？
】select24.0AJAX预填充如何？【英文标题】：select24.0AJAXpre-fillhowto?【发布时间】：2016-03-2802:50:27【问题描述】：我已经阅读了this、this、this和文档themostimportanthere，但它们都不适合我。我正在尝试使用AJAXselect2。我正在尝试制作一... 查看详情