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

我在下拉菜单的组合中使用Select2。 我有一个“国家”菜单和一个“州/省”菜单。 根据所选国家/地区，“州/省”下拉列表内容会发生变化。 使用数据库中的ajax拉出州/省，然后以这种方式显示：

$display_output = ' '; $display_output .= 'Select a State '; while ($state_details = $this->fetch_array($sql_select_states)) { $display_output .= '' . $state_details['s.name'] . ''; } $display_output .= ''; 

到现在为止还挺好。 所有省份都正确更改，但是当它最初加载时，Select2显示状态下拉列表的“未定义”，即使我将其设置为

 data-placeholder="Choose a Country..." 

我假设它可能是因为在加载时，所选的国家是“美国”并且它填充了一个州列表，但它们都不是默认或选择的。 有没有其他方法来定义默认值，以便它不显示“未定义”？

而另一个（但不太重要）的问题是，当某人选择“美国”，然后选择“亚利桑那州”时，如果该人随后改为“加拿大”作为国家，“亚利桑那州”的状态仍然存在但是当打开下拉列表可以选择加拿大各省。 当有人选择另一个国家时，有没有办法暂时将其恢复为默认值，直到再次选择一个省为止？

我的加载代码目前只是：

  $(document).ready(function() { $("#state").select2(); });  

Answer 1

选择3. *

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

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

如果您在国家/地区更改时重置州/地区时遇到问题，请尝试使用清除当前值

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

您可以在http://ivaynberg.github.io/select2/查看文档，其中概述了几乎/所有function。 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 。