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

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.*

请参阅更新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
});

Answer 2

其他组件通常会监听更改事件,或者附加可能有副作用的自定义事件处理程序.Select2没有可以触发而不是更改的自定义事件(如select2:update).您可以通过触发*change.select2事件来依赖jQuery的事件命名空间将范围限制为Select2.

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

Answer 3

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

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

不要使用destroy. 这不是正确的方法。

Answer 4

select2有placeholder参数。用那个

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