41

我在下拉菜单的组合中使用 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>
4

9 回答 9

64

选择 3.*

请参阅更新 select2 数据而不重建控件，因为这可能是重复的。另一种方法是销毁然后重新创建 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
});
于 2013-07-23T18:44:51.257 回答
19

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

$('#state').trigger('change.select2'); // Notify only Select2 of changes
于 2016-11-26T17:00:21.190 回答
5

select2有placeholder参数。使用那个

$("#state").select2({
   placeholder: "Choose a Country"
 });
于 2013-07-23T18:35:34.760 回答
3

终于解决了 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%');
于 2019-03-14T09:29:44.120 回答
3

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

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

不要使用destroy.

于 2018-05-08T06:47:20.900 回答
0

在 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 获得）保持活力的唯一原因。希望，这个解决方案将是有用的，或者可能会推动您在解决问题时做出正确的决定

于 2019-11-12T11:42:26.370 回答
0

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

$('#selector').html('').select2({
    data: //new data
})
于 2021-11-07T09:36:50.270 回答
0

解决方案：

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

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

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

我的文章关于

在此处输入链接描述

于 2021-10-06T13:54:10.817 回答
-1

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

页面加载时

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

ajax 函数成功后由 ajax 再次调用

$(".names").select2();
于 2018-12-04T13:14:51.303 回答