清除所有select2选项
是指将select2插件中的所有选项清空，使其恢复到初始状态。
select2是一个基于jQuery的下拉选择框插件，它提供了更强大的功能和更好的用户体验。它可以将普通的HTML下拉选择框转化为可搜索、可自动完成、可多选的下拉选择框。
要清除所有select2选项，可以使用以下步骤：
- 获取select2实例：首先，需要获取到select2插件所绑定的select元素的实例。可以通过jQuery选择器或JavaScript的getElementById等方法获取到该元素。
- 清空选项：通过select2实例的方法，可以清空所有选项。可以使用clear方法来清空所有选项，例如：
select2Instance.clear(); - 更新select2：清空选项后，需要调用select2实例的update方法来更新select2插件的状态，使其反映出清空后的状态。可以使用update方法，例如：
select2Instance.update();
清除所有select2选项的应用场景包括但不限于以下情况：
- 当需要重置或清空select2下拉选择框的选项时。
- 当需要根据某些条件动态改变select2选项时，可以先清空所有选项，然后再根据条件重新添加选项。
腾讯云提供了云计算相关的产品和服务，其中与select2选项清除相关的产品可能包括云服务器（CVM）、云数据库MySQL（CDB）、对象存储（COS）等。具体的产品选择和使用方式可以根据实际需求进行评估和选择。
更多关于腾讯云产品的介绍和详细信息，可以参考腾讯云官方网站：腾讯云。
相关·内容
2回答
我使用select2将远程数据加载到html选择中
问题是，如果用户选择一个选项，->将清除服务器->中的输入->数据更改，用户再次搜索数据。如果我要求选择数据，它会返回旧的(以前选择的)值。
示例：
//User search for an option and selects it
$('#someSelect').select2('data').Limit
//Here the limit is 0
//Server data changes on server. Now limit is 10
//User searchs ag
浏览 2提问于2017-06-05得票数 1
回答已采纳
我试着捕捉select2:clearing事件
$("#my-select").on("select2:clearing", function (e) {
console.log('cleared');
});
()
但它没有被发射。我也尝试过其他版本(如select2:removed等，请参阅中类似的问题)，但它也不起作用。
我使用select2 4.0.0-beta2 2。
浏览 10提问于2015-01-21得票数 13
回答已采纳
10回答
我正在和一个很棒的合作。
我也在尝试清理和禁用包含内容的select2，所以我这样做：
$("#select2id").empty();
$("#select2id").select2("disable");
好的，它可以工作，但如果我选择了一个值，所有的项都会被移除，控件被禁用，但选定的值仍然会显示。我想要清除所有内容，以便占位符将被显示。这是我做的一个例子，你可以看到这个问题：
HTML：
<select id="sel" data-placeholder="This is my placeholder"
浏览 8提问于2013-05-01得票数 48
回答已采纳
5回答
我正在处理一个要求，即在通过ajax提交表单后，我必须清除一个select2下拉框。我已经搜索并尝试了几个解决方案，但都不起作用。
我的select2代码是：
$(document).ready(function(){
$("#my_select_id").select2({
placeholder: "Select One Option",
allowClear: true,
initSelection: function(element, callback) { }
});
})
清除select2的脚本为：
$(&
浏览 69提问于2017-03-22得票数 5
回答已采纳
1回答
我试图动态地清除一个选项列表，并用新的数据重新加载它。我所读到的一切都告诉我，我可以像我正在做的那样设置数据，但它只是附加数据，而不是清除数据。
$("#optioner").select2();
$("#doit").click(function() {
$("#optioner").select2({
data: [{
id: "real1",
text: "Real 1"
}, {
id: "real2",
text:
浏览 7提问于2016-11-30得票数 3
回答已采纳
1回答
我的select2：
element.select2({
allowClear: true,
placeholder: 'blabla',
data: {/*mydata*/}
});
问题是，当添加新数据(手动或通过ajax请求)时，select2不清除选项的列表。
在这方面，我决定手动清除选项列表，因为select2没有相同的方法来清除选项列表。
element.empty().trigger('change');
为了显示新数据，我将select2重命名为相同的元素。
这是很好的工作，但在此之后，select2将第一项数据设置为se
浏览 10提问于2017-02-21得票数 4
回答已采纳
由于在DOM上创建/删除许多<option>标记成本很高，所以我在Select2 4.0中寻找一种使用大型本地JSON和无限滚动的方法。我还希望能够正确地获取/设置/更新值。有 (我提供了一个泥泞的解决方案)，但是我的解决方案有两个问题：
我可以清除单个源select中未选中的选项，并且Select2控件不会中断。这使不必要的选项无法在源select中生成(因为我使用本地JSON数组来处理数据)。但是，如果我尝试对多个选择执行相同的操作，这将破坏Select2中的功能。请参阅jsFiddle示例中的本节：
如果(！this.$element.prop(‘multiple’)){
浏览 3提问于2015-11-10得票数 1
回答已采纳
我使用select2进行选择，使用ajax加载数据，在初始选择后状态发生更改时，如何替换旧数据。
我的装载代码：
$('.datetimepicker').on("changeDate", function() {
//refresh selectbox ??
doctor_id = $(".select2-doctors").val();
clinic_id = $(".select2-clinics").val();
date = $('.dateti
浏览 1提问于2016-01-23得票数 8
回答已采纳
1回答
当我更改另一个select2下拉列表的值时，我尝试以编程方式更改select2下拉列表中的数据集。
我的问题是奇怪的，因为它似乎改变了徽章的价值，但没有选择本身。您可以在徽章中看到2和3，但是一个数据集中的文本的值是完全不同的，但是它不会改变选项。
这是一把小提琴，用来说明我的意思。
这是formatText函数：
function formatText (icon) {
if(icon.badge == undefined){
return $('<span>' + icon.text + '</span>');
}
浏览 3提问于2020-10-19得票数 0
回答已采纳
我用options在vue3中创建了一个vue3包装器，一切正常，但是问题是，当从调用API获得值时，它没有在select2选项中选择默认值。但是，当我创建一个静态的对象数组时，它就是这样做的。我不知道当它来自API的时候为什么要工作
父组件
在这里，我可以在选项道具中传递静态选项数组，我选择的值是2，它是在我的Select2组件中选择的，但是当传递formattedCompanies时，它不是与静态选项数组相同的格式，那么为什么这里没有选择任何原因？
<template>
<Form @submitted="store()" :processing=&#
浏览 6提问于2022-02-28得票数 0
所以我有这样的代码
<select style="width: 300px" id="vendor" name="vendor" multiple="multiple">
</select>
<input type="checkbox" id="checkbox" >Select All
在jquery上，像这样
$("#vendor").select2();
var ceked = new Option("ALL", "
浏览 1提问于2018-03-15得票数 0
回答已采纳
我正在将<input type="hidden">转换为select2 dropdown，并通过query方法向其提供数据
$('#inputhidden').select2({
query: function( query ) {
query.callback( data ); // the data is in the format select2 expects and all works well..
);
});
问题是，我需要修改ajax UI，并将两个按钮放置在搜索栏的顶部，当单击这两个按钮时，将执行se
浏览 3提问于2013-05-10得票数 48
回答已采纳
我有以下ko select2绑定：
ko.bindingHandlers.select2 = {
init: function (element, valueAccessor) {
$(element).select2(valueAccessor());
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
$(element).select2('destroy');
});
}
};
下面是我的带有input
浏览 6提问于2014-09-29得票数 0
回答已采纳
我使用两种select2，一种用于各省，另一种用于城市。我的目标是填充城市，select2从后端返回作为json返回的城市下拉。
现在，第一次调用对我有效，城市select2被正确地填充。唯一的问题是，在第二个调用(由省更改触发)中，json返回的内容不是替换select 2城市的内容，而是添加到其中的，因此我无法在添加之前了解如何清空前面的内容。
我两次都试过：
$("#city").select2({'data' : null });
和
$("#city").select2('data', null );
这里是我的ajax
浏览 2提问于2015-12-11得票数 0
回答已采纳
我使用的是一个select2 v4.0.1复选框，它可以通过下面的函数成功地更新其选项。
function updateList(){
$("#myselect").html("");
var updateList = {
operation:"updateList"
}
$.post("myphp.php", updateList).done(function(response) {
var counter = 0;
var arrayLength = resp
浏览 3提问于2017-02-16得票数 0
回答已采纳
我的页面中有一个select2输入文本字段，在该字段中，我将动态地在输入字段的焦点事件上加载项。
当我输入一些搜索文本时，让我们说“vai”，结果项被加载为‘vaibhav4 1’，‘vaibhav4 2’，‘vaibhav4 3’，'vaibhav4‘，重点放在第一项上。如果我按回车键，它就会被选中。
现在，我想要的是清除搜索词'vai‘和项目列表应该刷新显示，包含所有剩余的记录，包括上次搜索的项目。下面是我在$(document).ready(function)下的select2输入字段的javascript代码。
function format(item) { retur
浏览 6提问于2015-01-15得票数 5
回答已采纳
我有两种选择。这就是IT和管理。他们两个都有相同的选择。我怎么才能把他们聚在一起？
我怎么能这么做？实际上，我是新入Jquery的。
正如您所看到的，IT和Management都有相同的选项，即分析师。如何编写代码以确保分析师只声明一次，但可以同时用于IT和管理层
代码：
$(document).ready(function() {
$("#select1").change(function() {
if ($(this).data('options') == undefined) {
$(this).data('option
浏览 3提问于2015-01-20得票数 1
回答已采纳
有许多关于Select2 v4+的讨论，以及描述所选元素的预填充的答案。但在我的情况下，它看起来根本不起作用。也许是因为我使用的是Select2的。这是我的HTML：
<select class="form-control" id="newProgrTrack" multiple="multiple">
<option> Sony</option>
<option> HP</option>
<option> Dell</option>
<option
浏览 1提问于2016-02-04得票数 4
你好，我很困惑，在select2下拉菜单中有没有触发点？我认为这是select2的默认设置。问题是，每当我单击分区下拉列表下的关闭按钮时，分区下拉列表都会被清除。任何想法都是非常感谢的。
浏览 1提问于2021-06-09得票数 1
我正在使用jQuery验证来验证我的表单。在表单中有标签选择，我的选择使用select2 jQuery。当我清除我的“使我的select2更改必需”字段时，我遇到了问题。如何使用验证与select2工作良好？
我的守则：
$(document).ready(function () {
//validate form
$(".form_required").validate({
highlight: function (element, errorClass, validClass) {
$(element).parents('.form-cont
浏览 0提问于2018-08-09得票数 0
回答已采纳
上面是代码处理的例子。这个设置真的很简单。它有一个json数据变量、一个输入框和一个select2框。当更改select2值时，它会根据事件将select2的.text()值放入输入。
容易/快速注意到的是，json中所有可能的选项都是.text()值。我一直找不到解决办法。如果使用服务器ajax调用加载数据，则似乎不存在此问题。
$('#outitem').select2({
placeholder: 'Find Item',
width: '90px',
allowClear: true,
SingleSel
浏览 1提问于2016-01-21得票数 1
回答已采纳
我正在进行一个项目，在这个项目中，我正在使用jQueryselect2制作标记。除了一件事外，一切都很好。Select2在单击外部时强制清除输入值(不是作为标记创建的)。
例如。在下面的屏幕截图中，当我输入xyz并单击标签选择器外部时，它清除xyz。
我不想清空价值。
如何强制Select2不清除值？
我在谷歌上搜索，但运气不好，而且在select2文档中也没有选择
这就是我怎么用的
HTML
<input type="hidden" id="tagSelect" value="brown,red,green" style="
浏览 7提问于2014-12-12得票数 4
回答已采纳
经过一些乐趣和游戏，我终于弄明白了如何动态地(按下按钮)向页面加载时由Select2模型填充的多个MVC select控件添加和选择新值……
<select id="topicMaintMultiSelect" multiple="multiple" name="SelectedMaintTopic" tabindex="18" required="required">
@foreach (var topic in Model.SystemTopics.AvailableTopics)
浏览 7提问于2016-07-21得票数 0
回答已采纳
我有一个选择select2，它使用ajax搜索来查找结果。我把它初始化如下：
Task.ConfigureAssignee = function (objId) {
var sectionID = (Utilities.GetQueryStringParams('subsection') != undefined) ? Utilities.GetQueryStringParams('subsection') : "-1";
$(objId).select2({
placeholder: 'Type na
浏览 6提问于2014-04-17得票数 1
32回答
如何通过select2设置值重置时的占位符。在我的示例中，如果单击了位置或坡度选择框，并且我的select2的值大于select2的值，则应重置并显示默认占位符。此脚本正在重置值，但不会显示占位符
$("#locations, #grade ").change(function() {
$('#e6').select2('data', {
placeholder: "Studiengang wählen",
id: null,
text: ''
});
});
$(
浏览 367提问于2013-07-31得票数 249
回答已采纳
3回答
有人知道如何在angular中清除ui选择框的选定值吗？
我想要select2的功能，你在选择框中有一个小x。看起来它没有select2得到的allow-clear方法。
浏览 29提问于2014-10-16得票数 59
回答已采纳
当fisrt select2改变时，我正在尝试清理所有的选项。
代码实际上运行良好，但是当第一个select选项更改时，第三个select2仍然处于活动状态，显示了旧的值。
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/
浏览 8提问于2022-06-14得票数 0
回答已采纳
当在选中框上更改事件DOM更改(一些元素根据选中框值显示/隐藏)以在示例中复制此单击复选框“清除”按钮时，会发生这种情况。SelectBox不会被清洗。一些选择选项将被设置为值。
$(document).ready(function(){
$('#selectList').select2({
width: '100%',
allowClear: true,
placeholder: 'select option',
value: null
}).on('select2:selecting
浏览 4提问于2018-10-11得票数 3
1回答
我必须选中方框：
<select name="select1" id="select1" multiple="multiple">
<option value="8">Civics</option>
<option value="9">English</option>
<option value="10">Economics</option>
</select>
<select id="s
浏览 1提问于2017-03-30得票数 0
回答已采纳
我已经实现了select2小部件，版本4。它可以工作，但是x图标。它没有清除选择。
如果您看到这个文档：，它会说这实际上是一个问题，但文档并不完整。
有人已经解决这个问题了吗？
谢谢詹姆
浏览 4提问于2016-04-26得票数 13
1回答
你好，我正在努力弄清楚如何用select2 4.0.1更改所选内容的颜色(只有当用户选择占位符时，占位符必须是默认颜色-白色)。
默认情况下，第三张图片(前两张被选中)应该是这样的。
在选择之后，应该是这样的：
我知道如何为select2 3.5.x设置CSS，但最近我们决定更新select 2，我正在努力.
select2的原始CSS
.select2-container .select2-choice:not(.select2-default) {
background-image: none;
background-color: #D9FFC7;}
有没有人？谢谢你的答复
浏览 2提问于2015-12-09得票数 1
回答已采纳
2回答
尝试使用select2插件创建两个链接的自动填充选择字段，第一个选择包含国家名称(静态选择)，第二个显示从第一个选择中选择的国家的州，我的代码是
<select id="country" name="country" size="1" class=" form-control">
<option></option>
<option value="1">USA</option>
<option value="2">Untied K
浏览 2提问于2015-05-15得票数 8
回答已采纳
1回答
我使用的是select2 v4，当用户从下拉列表中选择一个选项时，我试图显示一个confirm()。
所以我有事件.on("select2:select", function(e) {})，如果用户从确认对话框中选择取消，我希望阻止select2。
我有以下几点：
$("#select2users").select2().on("select2:select", function(e) {
var data = e.params.data;
if(!confirm("Are you sure y
浏览 2提问于2017-11-22得票数 3
回答已采纳
我正在尝试连接两个超文本标记语言select元素。我想要的是当项目为select1时，在select2中选择禁用或删除。我试过了
var selector = "#select2 option [value = '" + id_familia + "']";
$(selector).remove();
但是，正如可能更新的#select2？ie selected item #item1和item #select2 remove，但当我再次选择任何item #select1 item1 no show in #select2。
有人能帮帮忙吗？
浏览 0提问于2013-02-27得票数 0
Haml：
.form-group
= f.hidden_field :gender, :id => 'select2', :style => "width:100%; height: 40px"
联署材料：
$("#select2").select2({
createSearchChoice: function (term, data) {
if ($(data).filter(function () {
return this.text.localeCompa
浏览 13提问于2015-05-08得票数 3
回答已采纳
1回答
我的Select2过滤器有问题。我需要实现清除按钮。我有4个过滤器，其中两个是简单的选择过滤器，两个是通过select2.js的查询参数开发的带有搜索栏的输入
<div class="input-append">
<select class="filter-select form-control data-filter fCombo-select">
<option></option>
</select>
</div>
<div class="input-ap
浏览 6提问于2017-04-27得票数 0
我在一个livewire组件中有一个select2。一切正常，但在我的编辑视图中，选中的选项不会在框中显示为选中。当我打开下拉列表时，它们显示为突出显示，因此数据来自后端。
<div wire:ignore class="col-8">
<select wire:model="notificationType" class="form-control select2 text-sm"
浏览 3提问于2021-03-05得票数 0
我有条形码扫描器，无论何时提交条形码自动选择和自动清除搜索框。
<script>
$(document).ready(function() {
$('.js-example-basic-single1').select2();
$('.js-example-basic-single1').select2('open');
$('.js-example-basic-single1').on('change', function (e) {
浏览 1提问于2022-01-01得票数 -1
2回答
我希望将选项设置为select2实例，具体而言，如果allowClear选项设置为true或false。
在其中找到allowClear选项的对象。
jQuery.-> select2 -> options -> options，
但我不知道如何通过密码访问它。
浏览 5提问于2019-11-25得票数 0
回答已采纳
文档说，select2:selecting和select2:unselecting是可以预防的。我想根据选择/取消选择的值有条件地阻止事件。
$('select').on('select2:selecting', function(e) {
// what value is currently being selected?
// $(this).val() does not yet have it and I should set it conditionally
})
浏览 27提问于2017-06-29得票数 1
回答已采纳
在从javascript中的按钮单击事件获得响应后，我正在为页面重新加载编写代码。但是它的不工作页面在按钮单击事件后不会重新加载。
我的表格
<div class="form-group">
<label>My Label Name</label>
<select class="form-control my_select2_id" id="my_select2_id" name="my_select2_id" tabindex="-1">
<optio
浏览 3提问于2017-04-03得票数 1
回答已采纳
我正在使用一个Select2小部件：
<?php echo $form->field($model, 'id_person')->widget(
\common\widgets\Select2::classname(),
[
'items' => \yii\helpers\ArrayHelper::map(\app\models\Persons::find()->all(), 'id_person', 'name_person'),
'place
浏览 2提问于2018-12-05得票数 0
3回答
如何清除下拉选项值？
、、、、
最近我遇到了一个未知的问题。我在MVC4中使用自定义下拉列表，并通过ajax填充数据。它工作正常，但问题是，在成功地将数据发送到控制器之后，它没有清除数据。在这里我尝试了这个例子..
<select data-placeholder="Select a Brand..." style="width:254px;" name="brand" id="brand">
<option value=""></option>
</select>
$("#br
浏览 2提问于2015-03-27得票数 0
14回答
要获取我使用的select2的选定值，请执行以下操作：
var x = $("#select").select2('data');
var select_choice = x.text
问题是，如果未选择值，则会引发错误，如果未选择选项，我想知道是否有任何方法使其返回占位符。
浏览 9提问于2014-01-28得票数 65
回答已采纳
我的HTML代码片段：
<div class="item form-group">
<label class="col-md-3 col-sm-3 col-xs-12" for="middlename">Payee Code </label>
<div class="col-md-6 col-sm-6 col-xs-12">
<select id="payee" name="payee" class="select2_multiple
浏览 3提问于2016-05-27得票数 0
回答已采纳
我使用Select2及其角度界面来实现如下的选择表单
<select ui-select2 ng-model='thing' data-placeholder='Options' id='form1>
<option value=''></Option>
<option value='1'>Option 1</Option>
<option value='2'>Option 2</Option>
在我的控制器中，
浏览 2提问于2013-06-08得票数 2
我想隐藏之前选择的下拉列表选项，但我的解决方案只适用于两个下拉列表。
这意味着，当我进入第三个下拉列表时，它将不会显示从第二个下拉列表中选择的选项，这是可以的，但它将显示从第一个下拉列表中选择的选项。
所以，据我所知，我使用的方法覆盖了最后一个，这就是为什么它不能工作。
以下是我的选择列表：
<select id="select1"
onchange="getSelectValue(this.value)"
asp-for="AssignedGroups.GroupMemberId1"
浏览 0提问于2022-04-16得票数 2
回答已采纳
我正在使用select2 jquery插件。
我使用的是open事件
var select2 = $('select').select2();
select2.on("select2:open", () => {
// I want to do some code here with $('.select2-results__option')
//$('.select2-results__option').size() is not equal to actual elements
});
当我们单击下拉列表时
浏览 1提问于2016-08-03得票数 2
1回答
我在bootstrap v4下拉列表中有一个select2。当下拉菜单被触发时，我将选项加载到select2中。
select2包含一些具有长名称的项目，如果打开select2，我希望显示完整的宽度，即使它比下拉列表更宽。
我在select2:opening和select2:open事件处理程序中尝试过select2({width: 'resolve'})和select2({width: '200%'})，但它们抛出了异常。如果我用宽度:200%初始化select2，如果没有打开它，它就太大了。
这个是可能的吗？有什么想法吗？谢谢。
浏览 5提问于2016-05-09得票数 0
在这里Select2.vue comp来源：
在这里ItemDetail.vue页面来源：
我在VueJS中使用VueJS，它是基于VueJS文档和其他资源创建的。一切看起来都很好。但是，有时tag或selected没有选择正确，调试后我发现它有时是undefined、[]或''(空)。
我高度怀疑这是因为异步。这里，我想要存档:我想显示所有单位，支持一个项目。
AJAX: api单元AJAX: api用于获取项的详细信息。数据项，包括支持此项的当前单元。基于item.units和units加载select2单元。有时是好的，但有时不是。
以下是我所做的一些解释
// Call
浏览 1提问于2020-01-18得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
