Question

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

Answer 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
});

Answer 2

其他组件通常会收听更改事件，或者附加可能有副作用的自定义事件处理程序。 Select2没有自定义事件（如select2：update），可以触发除更改以外的其他事件。您可以通过触发* change.select2事件来依赖jQuery的事件命名空间将范围限制为Select2。

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

Answer 3

select2具有placeholder参数。使用那个

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

Answer 4

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

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

请勿使用destroy。

Answer 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%');

Answer 6

在11 11 19中遇到了相同的问题，对于可能的坏死张贴感到抱歉。唯一的帮助是下一个解决方案：

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获得）存活下来的唯一方法。希望，该解决方案将很有用，或者可以促使您做出正确的决定来解决问题

Answer 7

通过新的ID或类（如下所示）再次select2初始化

页面加载时

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

成功执行ajax函数后，由ajax再次调用

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

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

7 个答案:

选择3。*

选择4. *更新