jquery 如何在重新加载不同内容后刷新Select2菜单?

gorkyyrv  于 2024-01-07  发布在  jQuery
关注(0)|答案(9)|浏览(188)

我使用Select 2在一个组合菜单中.我有一个菜单为“国家”和一个为“国家/省”.根据所选择的国家,“国家/省”选项卡的内容变化.国家/省是从数据库中拉出来的,然后以这种方式显示:

$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>';

字符串
到目前为止,一切都很好。所有省份都正确更改,但是当它最初加载时,Select 2显示“未定义”的州名,即使我将其设置为

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


我假设这可能是因为在加载时,选择的国家是“美国”,它填充了一个州的列表,但没有一个是默认的或选择的。有没有其他方法来定义一个默认值,使它不显示“未定义”?
和另一(但不太重要)的问题是,当有人选择“美国”,例如,然后选择“亚利桑那州”,如果该人然后更改为“加拿大”作为国家,“亚利桑那州”仍然保留,但当打开电子邮件时,加拿大的省份是可选的。有没有办法在有人选择另一个国家时暂时将其返回到默认值,直到一个省再次被选中
我的加载代码目前只是:

<script>
$(document).ready(function() { $("#state").select2(); });
</script>

798qvoo8

798qvoo81#

选择3.*

请参阅Update select2 data without rebuilding the control,因为这可能是一个重复。另一种方法是销毁然后重新创建select 2元素。

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

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

字符串
如果您在国家/地区更改时重置州/地区时遇到问题,请尝试使用

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


您可以在这里查看文档http://ivaynberg.github.io/select2/,它概述了几乎/所有功能。Select 2支持change等事件,可用于更新后续下拉列表。

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

选择4.* 更新

现在,您可以使用以下命令更新数据/列表,而无需重新构建控件:

fooBarDropdown.select2({
    data: fromAccountData
});

kyvafyod

kyvafyod2#

其他组件通常会监听change事件,或者附加自定义事件处理程序,这可能会产生副作用。Select2没有自定义事件**(如select2:update),除了change**之外,还可以触发。您可以依靠jQuery的事件命名空间来将范围限制为Select2,方法是触发 *change.select2事件。

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

字符串

0md85ypi

0md85ypi3#

在追加选择后使用以下脚本:

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

字符串
不要使用destroy,这不是正确的方法。

v64noz0r

v64noz0r4#

select2具有placeholder参数。使用该参数

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

字符串

disho6za

disho6za5#

最后解决了select2的重新初始化的问题后,一次调用。
你可以在成功函数中调用它。

注意:不要忘记将“.selector”替换到<select class="selector">元素的类中。

jQuery('.select2-container').remove();

jQuery('.selector').select2({
   placeholder: "Placeholder text",
   allowClear: true
});

jQuery('.select2-container').css('width','100%');

字符串

fjaof16o

fjaof16o6#

在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;

字符串
这是,也许,不是那么好,漂亮和精确的解决方案,也许我仍然没有清楚地理解,它是如何工作的,为什么,但这是唯一的,什么让我的选择2下拉菜单,由aerospace获得,活着.希望,这个解决方案将是有用的,或可能推动你在解决问题的正确决定

tzxcd3kk

tzxcd3kk7#

解决方案:
一旦通过ajax加载了内容,你就不能再像'.select2'那样进行攻击了,因为现在其他元素都有这个类作为select2生成的span。
因此,在加载ajax之后,您需要调用一个方法来检查select2是否已经示例化,并单独示例化它。

jQuery('select.select2').each(function (i, obj) {
    if (!jQuery(obj).hasClass("select2-hidden-accessible")) {                
        jQuery(obj).select2();
    }
});

字符串
我的文章关于
enter link description here

vshtjzan

vshtjzan8#

假设您只对替换select2数据感兴趣:

$('#selector').html('').select2({
    data: //new data
})

字符串

enxuqcxy

enxuqcxy9#

通过新的id或类重新初始化select2,如下所示
当页面加载

$(".mynames").select2();

字符串
成功后再次调用,

$(".names").select2();

相关问题