重新初始化select2数据
基础概念
Select2 是一个基于 jQuery 的插件，用于替换原生的 HTML <select> 元素，提供更强大的搜索、过滤和多选功能。它支持自定义数据源、模板和事件处理，适用于各种复杂的选择场景。
优势
- 增强用户体验：提供搜索功能，用户可以快速找到所需选项。
- 支持多选：允许用户选择多个选项。
- 自定义样式：可以通过 CSS 自定义外观。
- 数据绑定灵活：可以从多种数据源（如 JSON、数组等）加载数据。
类型
Select2 主要有以下几种类型：
- 基本选择器：简单的单选或多选。
- 标签选择器：允许用户添加自定义标签。
- 远程数据选择器：从服务器加载数据。
应用场景
- 表单选择：用于用户选择国家、城市等。
- 搜索过滤：用于搜索框中的选项过滤。
- 多选列表：用于选择多个标签或分类。
重新初始化 Select2 数据
如果你需要重新初始化 Select2 的数据，通常是因为数据源发生了变化，或者你需要刷新 Select2 的显示内容。以下是重新初始化 Select2 数据的步骤：
- 销毁当前的 Select2 实例：
- 销毁当前的 Select2 实例：
- 更新数据源：
- 更新数据源：
- 重新初始化 Select2：
- 重新初始化 Select2：
示例代码
以下是一个完整的示例，展示了如何重新初始化 Select2 数据：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Select2 Reinitialization</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
</head>
<body>
<select id="my-select">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<button id="refresh-btn">Refresh Select2</button>
<script>
$(document).ready(function() {
$('#my-select').select2();
$('#refresh-btn').click(function() {
var newData = [
{ id: 3, text: 'New Option 1' },
{ id: 4, text: 'New Option 2' }
];
$('#my-select').select2('destroy');
$('#my-select').html('');
$.each(newData, function(index, item) {
$('#my-select').append($('<option>', {
value: item.id,
text: item.text
}));
});
$('#my-select').select2();
});
});
</script>
</body>
</html>参考链接
通过以上步骤和示例代码，你可以轻松地重新初始化 Select2 的数据，以适应不同的应用场景和需求。
相关·内容
在我的select2 select中，我需要在文档准备好之后添加li，在添加之后，我如何重新初始化select2。如果我一次关闭并再次打开select，则追加的数据是可选择的，但不会在我追加时立即进行选择。我如何重新初始化它。
浏览 48提问于2014-12-19得票数 15
回答已采纳
我使用的是select2，其中我使用数组将选项加载到两个选择框中。当我从dropdown1中选择一个选项时，dropdown2中的一些值应该得到removed.Currently --我可以从dropdown2中删除这些选项，但是我无法在开始时用所有的值重新填充它们。{ id: 2, text: 'A' }, { id: 4, text: 'C'}];
$('#select1').selec
浏览 13提问于2016-10-18得票数 0
回答已采纳
我想使用Select2作为一个选择框，通过对api的一次调用来填充对api的ajay查询。没有必要在每次击键后再次查询api。data.results; $('#SelectLinkedSystemToAdd').select2('enable', true); $('#SelectLinkedSystemToAdd').
浏览 3提问于2018-12-27得票数 0
回答已采纳
1回答
select2:select事件为您提供有关所选对象的数据。change事件则不会。因此，为了初始化我的selects：try { }}
我有从属选择，例如，如果你选择SelectA，SelectB就会被初始化。我希望能够在SelectA中以编程方式选择一个元素，并让它触发其select2:select事件，然后该
浏览 38提问于2018-06-07得票数 0
3回答
因此，使用select2，我想通过这样做来替换select中的所有选项。console.log(options.length);问题是，select2只是将新的数据附加到已经存在的内容上。
浏览 6提问于2015-11-10得票数 6
回答已采纳
从游戏中我可以看到这个代码$("#Selected3").select2({ placeholder$("#Selected3").select2({ placeholder: "Show a placeholder"编辑:对于任何愿意尝试这个但不知道select2</em
浏览 4提问于2014-06-13得票数 1
回答已采纳
2回答
为了实现这一点，我制作了一个按钮来附加一个新的文本框，该文本框应该使用Select2插件。一旦我处理了jQuery append()函数，附加的代码甚至没有读取Select2插件。-- Required for data-placeholder attribute to work with Select2 plugin -->-- Required for data-placeholder attribute to work with Select2 plugin --> @foreach($vehicle a
浏览 18提问于2019-09-23得票数 0
回答已采纳
在我的application.js中，我已经初始化了.select2选择： $(".select2").select2({ width: '100%', });在我的应用程序的另一部分中，我有一个与remote: true的链接，它用.select2我必须再次初始化j
浏览 0提问于2017-10-18得票数 3
回答已采纳
1回答
我试图动态地清除一个选项列表，并用新的数据重新加载它。我所读到的一切都告诉我，我可以像我正在做的那样设置数据，但它只是附加数据，而不是清除数据。 $("#optioner").select2({ text: &quo
浏览 7提问于2016-11-30得票数 3
回答已采纳
1回答
我在表单中使用两个select2，如果选择第一个select2，它将从服务器加载一个数据，然后从接收到的数据中填充第二个select2。问题是它没有填充第二个select2，这里有人知道如何解决它吗？我尝试了以下代码，但没有成功：secondSelection = $('#second_id').se
浏览 1提问于2014-04-02得票数 0
回答已采纳
我一直在为一个自定义组件使用select2，我想知道是否有一种方法可以通过编程方式删除用户创建的标记。我尝试了以下方法:获取select2中的数据数组，然后删除必要的元素，然后更新select2数据属性。var select2Data = $('.members').select2('data'); //original select2 element data
var select2NewUser =(&#x
浏览 0提问于2015-08-26得票数 0
2回答
表单并选择搜索后不工作。
、、、
</div>当我在客户端上单击“编辑”时，将显示模式，并且选择输入是很好的，因为我有以下内容 $('.selectpicker').select2(success: function(data) { }},
从这个Ajax调用返回的数据如下但是，这一次select输入不太好，而且似乎没有sele
浏览 1提问于2016-08-12得票数 1
回答已采纳
1回答
当我更改另一个select2下拉列表的值时，我尝试以编程方式更改select2下拉列表中的数据集。这是一把小提琴，用来说明我的意思。$('#fam').select2().on('change', function() {
$('#products'
浏览 3提问于2020-10-19得票数 0
回答已采纳
2回答
目前，我的Select2初始化看起来如下所示： allowClear: true,
placeholder: 'Please select',
浏览 3提问于2015-02-10得票数 1
回答已采纳
我正在尝试使用Select2中的标记。我想让用户能够加载一些已知的标签，有时添加新的，如果他愿意的话。$("#tags").select2({ tags: true, });
浏览 2提问于2016-10-19得票数 0
回答已采纳
1回答
我正在Select2 4.0和Rails 4.2.7.1中开发一个多个选择。代码在数据库中保存了正确的值，但我注意到了一个问题:在验证失败后，它会丢失所有的值选择。如何初始化页面重新加载后先前选择的所有值？谢谢。这是当前的select2声明：ajax: {dataType: 'json
浏览 0提问于2016-11-22得票数 0
回答已采纳
1回答
当country select的选定值是Canada时，我想重新初始化region select的数据值。否则区域列表将保持默认，因此使用区域。 到目前为止，我有以下代码，但它总是留在美国区域。我也试图销毁并重新初始化它，但不幸的是没有任何成功。 startWithMatcher, });});
countrySelect.on('select2</e
浏览 127提问于2021-03-01得票数 1
回答已采纳
1回答
我有一个table一行，包含大约30 td，对于每一个td，我打开一个弹出窗口，在那里我将显示我的表单，因为我想显示它们为哪个td输入值，所以我选择使用引导弹出，我将select2用于弹出窗体上的所有像这样， width: '100%',但这似乎行不通。select2会被应用，但是option根本不会打开。我也像这样重新初始化了select2，
$(&#x
浏览 0提问于2018-02-01得票数 2
我正在尝试在我的项目中使用select2。 在下面的屏幕截图中，我希望在用户单击ADD More按钮后动态复制社交媒体部分(包括select2、input和remove btn)： ? 为了避免冲突，我在点击事件开始时为所有select2调用destroy事件。然后，我将复制这些元素。然后，我将重新初始化select2。但是，它始终只会将一个select转换为select2。在下面的屏幕截图中，您可以看到复制的selects没有转换为select2</em
浏览 18提问于2019-02-20得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
