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

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

在刷新多select之前，您需要将值设置为一个空数组。另外，请注意您在 "campaign" 中缺少一个 "s" in your selector.

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

Answer 2

根据文档你可以使用：

.multiselect('deselectAll', justVisible): Deselects all options. If justVisible is set to true or not provided, all visible options are deselected, otherweise (justVisible set to false) all options are deselected.

调用之前的方法后你需要updateButtonText:

.multiselect('updateButtonText'): When manually selecting/deselecting options and the corresponding checkboxes, this function updates the text and title of the button.

因此你可以这样写：

 $('#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>

Answer 3

试试吧！

$('#campaign-select').multiselect({
     buttonWidth: 330,
     includeSelectAllOption: true,
     allSelectedText: 'Clean all',
     onSelectAll: function (options) {
        $("#campaign-select").multiselect("clearSelection");
     }
});

或添加重置按钮

$('#campaigns-select').multiselect({
   buttonWidth: 330,
   enableResetButton: true,
   resetText: "Clean"
});

Print 01 Print 02

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

How to deselect all selected values from bootstrap-multiselect with reset button?

javascript

jquery

twitter-bootstrap

bootstrap-multiselect