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

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