如何使用 jQuery 填充引导多选答案

【问题标题】：How to populate bootstrap multi select using jQuery如何使用 jQuery 填充引导多选
【发布时间】：2018-06-10 15:32:46
【问题描述】：

我正在使用两个多选下拉菜单。第二个多选选项取决于第一个多选值。

当第一个下拉 (#participation_channels) 选项是选择或取消选择时，我正在尝试使用 ajax 调用填充第二个多选 (#field_zone) 选项。我正在尝试填充第二个多选下拉列表（#field_zone），但未填充第二个下拉列表

plugin used

 $(document).ready(function () {
    $('#participation_channels').multiselect({
        onChange: function (option, checked) {
            var channels = $('#participation_channels').val();
            $.ajax({
                url: "url",
                data: {channels: channels},
                type: "POST",
                dataType:'json',
                cache: false,
                success: function (data) {
                    $.each(data, function(i, zone) {
                        $("#field_zone").append('<option value="' + zone.zone + '">' + zone.zone + '</option>');
                    });
                    $("#field_zone").attr('multiple', 'multiple'); 
                   $("#field_zone").multiselect(); 
                }
            });
        }
    });
    $('#field_zone').multiselect();
});

【问题讨论】：

标签： jquery ajax

【解决方案1】：

您需要强制多选从原始select 元素重新生成所有选项。因此，在为 select 创建新选项后（在 success 回调中），您应该更改：

$("#field_zone").multiselect();

到：

$("#field_zone").multiselect('rebuild');

因此将根据更新的选项重新构建多选。

【讨论】：