ajax加载不同内容后如何刷新Select2下拉菜单？

Posted 2023-02-24

【中文标题】ajax加载不同内容后如何刷新Select2下拉菜单？

【英文标题】：how to refresh Select2 dropdown menu after ajax loading different content?

【发布时间】：2013-07-22 23:54:39

【问题描述】：

我在下拉菜单组合中使用 Select2。我有一个“国家”菜单和一个“州/省”菜单。根据所选国家/地区，“州/省”下拉菜单的内容会发生变化。使用 ajax 从数据库中提取州/省，然后以这种方式显示：

$display_output = '<select style="width:350px;" tabindex="2" name="state" id="state" data-placeholder="Choose a Country..."> ';
$display_output .= '<option value="" selected>Select a State</option> ';

while ($state_details = $this->fetch_array($sql_select_states))

    $display_output .= '<option value="' . $state_details['id'] . '" ' . (($selected_value == $state_details['id']) ? 'selected' : ''). '>' . $state_details['s.name'] . '</option>';


$display_output .= '</select>';

到目前为止，一切都很好。所有省份都正确更改，但是当它最初加载时，Select2 为州下拉菜单显示“未定义”，即使我将其设置为

data-placeholder="Choose a Country..."

我假设这可能是因为在加载时，选择的国家/地区是“美国”，它填充了一个州列表，但它们都不是默认的或选择的。有没有其他方法可以定义默认值，使其不显示“未定义”？

另外一个（但不太重要的）问题是，例如当某人选择“美国”，然后选择“亚利桑那”时，如果该人随后更改为“加拿大”作为国家，“亚利桑那”的状态仍然保留，但在打开下拉列表时，加拿大的省份是可选的。当有人选择另一个国家时，有什么办法可以暂时将其恢复为默认值，直到再次选择一个省份？

我的加载代码目前只是：

<script>
$(document).ready(function()  $("#state").select2(); );
</script>

【参考方案1】：

选择 3.*

请参阅Update select2 data without rebuilding the control，因为这可能是重复的。另一种方法是销毁然后重新创建 select2 元素。

$("#dropdown").select2("destroy");

$("#dropdown").select2();

如果您在重置国家/地区更改时遇到问题，请尝试使用

清除当前值

$("#dropdown").select2("val", "");

您可以在此处查看文档http://ivaynberg.github.io/select2/，其中概述了几乎/所有功能。 Select2 支持change 等事件，可用于更新后续下拉菜单。

$("#dropdown").on("change", function(e) );

选择 4.* 更新

您现在可以使用以下方法更新数据/列表而无需重建控件：

fooBarDropdown.select2(
    data: fromAccountData
);

【讨论】：

$("#select").html("") 如果您想在添加新内容之前清除它。否则，它会添加你扔给它的所有东西。

似乎 data 正在将数据附加到现有数据，而不是替换它们。

@delmalki 它只适用于您的贡献。有没有什么 api 方法可以在 select2 中做到这一点？

更新对我不起作用，fromAccountData 已更新，但旧选项仍在选择中

delmalki 的评论是唯一对我有用的东西。我还必须添加一个 $('#element').html('') 以确保占位符显示备份。无论我是否销毁它，其他所有选项都只是在附加新列表。

【参考方案2】：

其他组件侦听 change 事件或附加可能有副作用的自定义事件处理程序是很常见的。 Select2 没有除 change 之外可以触发的自定义事件 （如 select2:update）。您可以通过触发 *change.select2 事件来依赖 jQuery 的事件命名空间来限制 Select2 的范围。

$('#state').trigger('change.select2'); // Notify only Select2 of changes

【参考方案3】：

select2 具有placeholder 参数。使用那个

$("#state").select2(
   placeholder: "Choose a Country"
 );

【讨论】：

不幸的是，这似乎不起作用。它仍然显示未定义:(

【参考方案4】：

在附加您的选择后使用以下脚本。

$('#state').select2();

不要使用destroy。

【讨论】：

你能解释一下为什么我们不应该使用destroy吗？

【参考方案5】：

终于解决了 ajax 调用后 select2 重新初始化的问题。

可以在ajax的成功函数中调用。

注意：不要忘记将“.selector”替换为<select class="selector"> 元素的类。

jQuery('.select2-container').remove();

jQuery('.selector').select2(
   placeholder: "Placeholder text",
   allowClear: true
);

jQuery('.select2-container').css('width','100%');

【参考方案6】：

在 11 11 19 中遇到了同样的问题，对于可能的 necroposting 深表歉意。 唯一有帮助的是下一个解决方案：

var drop = $('#product_1');   // get our element, **must be unique**;
var settings = drop.attr('data-krajee-select2');  pick krajee attrs of our elem;
var drop_id = drop.attr('id');  // take id 
settings = window[settings];  // take previous settings from window;
drop.select2(settings);  // initialize select2 element with it;
$('.kv-plugin-loading').remove(); // remove loading animation;

这也许不是那么好、好的和精确的解决方案，也许我仍然没有清楚地理解它是如何工作的以及为什么，但这是唯一的，是让我的 select2 下拉列表（由 ajax 获得）保持活力的唯一原因。 希望这个解决方案有用，或者可能会推动您在解决问题时做出正确的决定

【参考方案7】：

解决办法：

一旦通过 ajax 加载内容，您就不能再像“.select2”那样进行一般攻击。因为现在其他元素都有这个类作为select2生成的span。

所以在加载 ajax 之后，你需要调用一个方法来检查 select2 是否已经实例化并单独实例化它。

jQuery('select.select2').each(function (i, obj) 
    if (!jQuery(obj).hasClass("select2-hidden-accessible"))                 
        jQuery(obj).select2();
    
);

我的文章关于

enter link description here

【参考方案8】：

假设您只对替换 select2 数据感兴趣：

$('#selector').html('').select2(
    data: //new data
)

【参考方案9】：

通过新的 id 或类再次初始化 select2，如下所示

页面加载时

$(".mynames").select2();

ajax 函数成功后再次调用 ajax

$(".names").select2();