Question

I am having issues when trying to select the element which contains all the selected values.

For example: if you select by id such as

$('#campaign-select').multiselect('refresh')，

它没有做任何事情。那是为什么？

请参阅jsFiddle

固定它！

$('#filter-reset-btn').on('click', function () {

               $('#campaigns-select').multiselect('rebuild');
               /* resetting the select element to refresh*/
               $('#campaigns-select,#sites-select,#mdmadservers-select,#ratetypes-select option:selected').each(function () {

                   $(this).prop('selected', false);

               })

               $('#campaigns-select,#sites-select,#mdmadservers-select,#ratetypes-select').val([]).multiselect('refresh')



           });

此处已更新为jsFiddle

Answer 1

在刷新多重选择之前，需要将值设置为空数组。另外，请注意你错过了一个＆＃34; s＆＃34;在＆＃34;广告系列＆＃34;在你里面选择。

使用此：$('#campaigns-select').val([]).multiselect('refresh')

Answer 2

根据您可以使用的文档：

.multiselect('deselectAll', justVisible)：取消选择所有选项。如果justVisible设置为true或未提供，则取消选择所有可见选项，将其他设置（justVisible设置为false）取消选择所有选项。

调用上一个方法后，您需要 updateButtonText ：

.multiselect('updateButtonText')：手动选择/取消选择选项和相应的复选框时，此功能会更新按钮的文本和标题。

因此你可以写：

 $('#campaigns-select').multiselect('deselectAll', false);
 $('#campaigns-select').multiselect('updateButtonText');

var msOptions = {
    includeSelectAllOption: true,
    enableFiltering: true,
    selectAllJustVisible: false,
    buttonWidth: '80%',
    buttonText: function (options, select) {
        return options.length + ' selected';
    }
};

$('#campaigns-select').multiselect(msOptions);
$('#sites-select').multiselect(msOptions);
$('#mdmadservers-select').multiselect(msOptions);
$('#ratetypes-select').multiselect(msOptions);


$('#filter-reset-btn').on('click', function () {
    $('#campaigns-select').multiselect('deselectAll', false);
    $('#campaigns-select').multiselect('updateButtonText');
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>

<div id="wrapper">
    <!--SideBar-->
    <div id="sidebar-wrapper">
        <div class="sidebar-header" style="text-align:center;">Filters</div>
        <div id="sidebar-filter panel panel-default">
            <div class="form-group">
                <div class="text-caption" style="margin-top:20px;">Date Range</div>
                <div style="width: 80%;margin-left: 30px">
                    <input type='text' name="daterange" class="form-control" value=""/>
                </div>
            </div>
            <div class="form-group">
                <div class="text-caption">Campaign</div>
                <select class="form-control campaigns-select-class" id="campaigns-select" multiple="multiple">
                    <option value="2929">TestCampaign1</option>
                    <option value="2930">TestCampaign2</option>
                    <option value="2931">TestCampaign3</option>
                </select>
            </div>
            <div class="form-group">
                <div class="text-caption">Site</div>
                <select class="form-control sites-select" id="sites-select" multiple>
                    <option value="1010">TestSite1</option>
                    <option value="1011">TestSite2</option>
                    <option value="1012">TestSite3</option>
                </select>
            </div>
            <div class="form-group">
                <div class="text-caption">Server</div>
                <select class="form-control mdmadservers-select" id="mdmadservers-select" multiple>
                    <option value="1"> TestServer1</option>
                    <option value="2"> TestServer2</option>
                    <option value="3"> TestServer3</option>
                </select>
            </div>
            <div class="form-group">
                <div class="text-caption">Rate Type</div>
                <select class="form-control ratetypes-select" id="ratetypes-select" multiple>
                    <option value="Test1">Test1</option>
                    <option value="Test2">Test2</option>
                    <option value="Test3">Test3</option>
                </select>
            </div>
            <div class="form-group">
                <div class="text-caption">
                    <input type="checkbox" class="hide-completed-entries" id="hide-completed-entries" checked="checked">
                    Hide Completed
                </div>
            </div>
            <button type="button" class="btn btn-success btn-block" id="filter-btn">Apply</button>
            <button type="button" class="btn btn-primary btn-block resetfilters" id="filter-reset-btn">Reset</button>
        </div>

    </div>
</div>

如何使用重置按钮取消选择bootstrap-multiselect中的所有选定值？

2 个答案: