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

Question

$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

请参阅Update select2 data而不重建控件，因为该控件可能是重复的。另一种方法是销毁然后重新创建select2元素。

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

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

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

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

您可以在http://ivaynberg.github.io/select2/中查看文档，该文档概述了几乎/所有的特性。Select2支持change等事件，可用于更新后续下拉列表。

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

fooBarDropdown.select2({
    data: fromAccountData
});