php ajax加载不同内容后如何刷新Select2下拉菜单？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17818210/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to refresh Select2 dropdown menu after ajax loading different content?
提问by user1227914
I'm using Select2 in a combination of dropdown menus. I have one menu for "Countries" and one for "States/Provinces". Depending on the country that is chosen, the "States/Provinces" dropdown changes in content. The states/provinces are pulled with ajax from a database and then displayed this way:
我在下拉菜单的组合中使用 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>';
So far, so good. All the provinces change correctly, however when it initially loads, the Select2 shows "undefined" for the states dropdown, even though I have it set as
到现在为止还挺好。所有省份都正确更改，但是当它最初加载时，Select2 显示状态下拉列表“未定义”，即使我将它设置为
data-placeholder="Choose a Country..."
I'm assuming it could be because on loading, the country selected is "United States" and it populates a list of states but none of them is default or selected. Is there any other way to define a default value so that it doesn't show "Undefined"?
我假设这可能是因为在加载时，选择的国家是“美国”，它填充了一个州列表，但没有一个是默认的或被选中的。有没有其他方法可以定义默认值，使其不显示“未定义”？
And another (but less important) problem is that when someone chooses "United States" for example, and then chooses "Arizona", if the person then changes to "Canada" as the country, the state of "Arizona" still stays but when opening the dropdown the provinces of Canada are selectable. Is there any way to return it to the default value temporarily when someone selects another country, until a province is chosen again?
另一个（但不太重要）的问题是，例如，当有人选择“美国”，然后选择“亚利桑那”时，如果该人随后更改为“加拿大”作为国家/地区，“亚利桑那”的状态仍然保留，但是当打开下拉菜单，可选择加拿大的省份。当有人选择另一个国家时，有什么方法可以暂时将其恢复为默认值，直到再次选择一个省？
My loading code is currently just:
我的加载代码目前只是：
<script>
$(document).ready(function() { $("#state").select2(); });
</script>
回答by SamV
Select 3.*
选择 3.*
Please see Update select2 data without rebuilding the controlas this may be a duplicate. Another way is to destroy and then recreate the select2 element.
请参阅更新 select2 数据而不重建控件，因为这可能是重复的。另一种方法是销毁然后重新创建 select2 元素。
$("#dropdown").select2("destroy");
$("#dropdown").select2();
If you are having problems with resetting the state/region on country change try clearing the current value with
如果您在国家/地区更改时重置州/地区时遇到问题，请尝试使用以下命令清除当前值
$("#dropdown").select2("val", "");
You can view the documentation here http://ivaynberg.github.io/select2/that outlines nearly/all features. Select2 supports events such as changethat can be used to update the subsequent dropdowns.
您可以在此处查看文档http://ivaynberg.github.io/select2/，其中概述了几乎/所有功能。Select2 支持诸如change可用于更新后续下拉列表的事件。
$("#dropdown").on("change", function(e) {});
Select 4.* Update
选择 4.* 更新
You can now update the data/list without rebuilding the control using:
您现在可以使用以下命令更新数据/列表而无需重建控件：
fooBarDropdown.select2({
data: fromAccountData
});
回答by Chintan7027
It's common for other components to be listening to the changeevent, or for custom event handlers to be attached that may have side effects. Select2 does not have a custom event (like select2:update)that can be triggered other than change. You can rely on jQuery's event namespacing to limit the scope to Select2 though by triggering the *change.select2 event.
其他组件侦听更改事件或附加可能有副作用的自定义事件处理程序是很常见的。Select2 没有可以触发的自定义事件（如 select2:update）change。您可以依靠 jQuery 的事件命名空间来通过触发 *change.select2 事件将范围限制为 Select2。
$('#state').trigger('change.select2'); // Notify only Select2 of changes
回答by Khawer Zeshan
select2has the placeholderparameter. Use that one
select2有placeholder参数。用那个
$("#state").select2({
placeholder: "Choose a Country"
});
回答by Mayank Dudakiya
Finally solved issue of reinitialization of select2 after ajax call.
终于解决了ajax调用后select2重新初始化的问题。
You can call this in success function of ajax.
您可以在 ajax 的成功函数中调用它。
Note : Don't forget to replace ".selector" to your class of <select class="selector">element.
注意：不要忘记将“.selector”替换为您的<select class="selector">元素类。
jQuery('.select2-container').remove();
jQuery('.selector').select2({
placeholder: "Placeholder text",
allowClear: true
});
jQuery('.select2-container').css('width','100%');
回答by Parth Patel
Use the following script after appending your select.
附加您的选择后使用以下脚本。
$('#state').select2();
Don't use destroy.
不要使用destroy.
回答by Green Joffer
Got the same problem in 11 11 19, so sorry for possible necroposting. The only what helped was next solution:
在 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;
It's, maybe, not so good, nice and precise solution, and maybe I still did not clearly understood, how it works and why, but this was the only, what keeps my select2 dropdowns, gotten by ajax, alive. Hope, this solution will be usefull or may push you in right decision in problem fixing
也许，它不是那么好的、好的和精确的解决方案，也许我仍然没有清楚地理解它是如何工作的以及为什么，但这是唯一使我的 select2 下拉菜单（由 ajax 获得）保持活力的原因。希望这个解决方案会很有用，或者可能会促使您在解决问题时做出正确的决定
回答by Nazir Ahmad
Initialize again select2by new id or class like below
select2通过新的 id 或类再次初始化，如下所示
when the page load
页面加载时
$(".mynames").select2();
call again when came by ajax after success ajax function
ajax函数成功后ajax来时再次调用
$(".names").select2();
