表单重置和复选框重新填充的引导多选问题答案

【问题标题】：Bootstrap-Multiselect issue with form reset and checkboxes repopulating表单重置和复选框重新填充的引导多选问题
【发布时间】：2017-06-28 21:52:41
【问题描述】：

我在我的应用程序中使用bootstrap-multiselect 作为下拉菜单。一切正常，除了我的表单重置，当我希望它恢复到最初选择的值时。当它关闭时（即创建一个包含多个选择的列表），它会按预期在菜单中显示所选值，但是当我打开菜单时，未选中所选项目的复选框。

我尝试了以下方法无济于事：

$("#MyMenu").multiselect('refresh');
$("#MyMenu").multiselect('rebuild');
$("#MyMenu").multiselect('destroy');

紧随其后

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

感谢任何帮助！

【问题讨论】：

那是您使用的确切语法吗？请不要让我们假设您的代码中还有什么。例如，我猜你实际上尝试过$("#MyMenu").multiselect('refresh');。
抱歉，为了更准确，我更新了代码。
嗯...应该做到了。也许创建一个演示。 jsfiddle.net
这里是：JSFiddle

标签： jquery bootstrap-multiselect

【解决方案1】：

对我来说，它只适用于：

$('#id').multiselect('refresh');

但是，必须注意，在表单输入实际重置之前会触发重置事件。实际上，这意味着以下内容不起作用：

$('#formID').on('reset', function(){
    $('#id').multiselect('refresh');
});

将调用包装在瞬时 setTimeout 内时会起作用！

$('#formID').on('reset', function(){
    setTimeout(function(){
        $('#id').multiselect('refresh');
    });
});

【讨论】：

我不知道表单重置 - 谢谢！

【解决方案2】：

今天我遇到了同样的问题...我遇到了

$("option:selected").removeAttr("selected");
$("#MyMenu").multiselect('refresh');

它对我有用...

【讨论】：

【解决方案3】：

经过多次反复试验，我终于这样解决了。

$('#MyMenu').multiselect('destroy');
$('#MyMenu').multiselect();

$('#MyMenu option:selected').each(function () {
    $(":checkbox[value=" + $(this).val() + "]").attr('checked', true)
})

【讨论】：

根据你的回答我做了这个，它似乎工作：$('option:selected', theMultiselect$).each(function() { theMultiselect$.multiselect('deselect', $(this).val()); });
我在上面的 JSFiddle 中尝试过，但它似乎不起作用。

【解决方案4】：

str 是数据库中的数组

$('#dropdown').multiselect({includeSelectAllOption: true,});
$("#dropdown").multiselect('deselectAll', false);

首先初始化并重置doropdown。

for(i=0; i<= str.length; i++){           
      $("#dropdown").find("option[value='"+ $.trim(str[i])+"']").prop("selected", true);
      $("#dropdown").find("option[value='"+ $.trim(str[i])+"']").attr("selected", "selected");          
}

$("#dropdown").multiselect("refresh");

此代码将预先选择值。

另外，如果你想重置下面的下拉列表是代码

$('#dropdown').multiselect({includeSelectAllOption: true,});
$("#dropdown").multiselect('deselectAll', false);

$("#dropdown").multiselect("refresh");

不要忘记刷新。此代码经过试验和测试。对我有用。

【讨论】：

你能正确格式化你的代码吗？目前无法阅读。

【解决方案5】：

要在页面加载时将多选重置为其原始状态，请尝试：

// Initialize Multiselect
var msDropdownInitialSelected;
$(document).ready(function () {
    $('#msDropdown').multiselect();
    $('#msDropdown').multiselect('select', valuesArray);

    msDropdownInitialSelected = $('#msDropdown').val();
});

// Reset Multiselect
$('msDropdown').on('reset', function(){
    $('#msDropdown').multiselect('select', msDropdownInitialSelected);
    $('#msDropdown').multiselect('refresh');
});

【讨论】：

【解决方案6】：

通过按顺序执行以下代码，重置多选对我有用。

$('#ID').multiselect('deselectAll', false);    
$('#ID').multiselect('select', []);

【讨论】：

【解决方案7】：

以上都不是，但以下对我有用。

$('#ID').multiselect('deselectAll', false);    
$('#ID').multiselect('updateButtonText');

【讨论】：

【解决方案8】：

这是对我有用的代码，其他所有代码都无法工作。

$('#basicForm').on('reset', function(){ 
    // clearing the categories
    $('#project_category').select2('val', null);
    $('#project_category').attr('value', '');
});

【讨论】：