Bootstrap 4 多选下拉菜单

Question

我在很多论坛上看到，在 bootstrap 4 测试版之后，select 和 multiselect 的问题已经解决了。

不幸的是，我无法在 ( bootstrap 4 ) 中显示 ( bootstrap 3 ) 中的多选。

Bootstrap 3 代码段

 $('select').selectpicker();

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.8.1/css/bootstrap-select.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.8.1/js/bootstrap-select.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <select class="selectpicker" multiple data-live-search="true"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select>

Bootstrap 4 代码段

 $('select').selectpicker();

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script> <select class="selectpicker" multiple data-live-search="true"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select>

Answer 1

因为bootstrap-select是一个bootstrap组件，所以你需要像在V3中那样将它包含在代码中

注意：此组件仅适用于版本1.13.0以来的boostrap-4

 $('select').selectpicker(); 

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script> <select class="selectpicker" multiple data-live-search="true"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> 

Answer 2

MultiSelect DropDown带复选框

<div class="col-md-6">
                                        <div class="depSelectToEdit">
                                            <label>Departments: <input type="text" class="total" value="6 Selected" readonly></label>
                                            <div class="form-control parentChkBox">
                                                <div class="checkbox">
                                                    <label><input class="parentChk" type="checkbox" value="All">Select All</label>
                                                </div>
                                            </div>
                                            <div class="form-control multiSelections">
                                                <div class="checkbox">
                                                    <label><input class="childChk" type="checkbox" value="Networking" checked>Networking</label>
                                                </div>
                                                <div class="checkbox">
                                                    <label><input class="childChk" type="checkbox" value="Billing" checked>Billing</label>
                                                </div>
                                                <div class="checkbox">
                                                    <label><input class="childChk" type="checkbox" value="Support" checked>Support</label>
                                                </div>
                                                <div class="checkbox">
                                                    <label><input class="childChk" type="checkbox" value="IT" checked>IT</label>
                                                </div>
                                                <div class="checkbox">
                                                    <label><input class="childChk" type="checkbox" value="Marketing" checked>Marketing</label>
                                                </div>
                                                <div class="checkbox">
                                                    <label><input class="childChk" type="checkbox" value="Management" checked>Management</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

脚本

 //  Department selection In EditPopup
                                        $('.depSelectToEdit .parentChk').click(function () {
                                            if ($(this).is(':checked')) {
                                                $(".depSelectToEdit .total").val("");
                                                $(".depSelectToEdit .total").val("Selected " + $('.depSelectToEdit .parentChk').val());
                                                $(".depSelectToEdit .childChk").prop('checked', true);

                                                $('.depSelectToEdit .childChk').click(function () {
                                                    var totalchildChk = $(".depSelectToEdit .childChk").length;
                                                    if ($(".depSelectToEdit .childChk:checked").length < totalchildChk) {
                                                        $('.depSelectToEdit .parentChk').prop('checked', false);
                                                    } else
                                                    {
                                                        $('.depSelectToEdit .parentChk').prop('checked', true);
                                                        $(".depSelectToEdit .total").val("Selected " + $('.depSelectToEdit .parentChk').val());
                                                    }
                                                });
                                            } else {
                                                $(".depSelectToEdit .childChk").prop('checked', false);
                                                $(".depSelectToEdit .total").val("");
                                            }
                                        });


                                        $('.depSelectToEdit .childChk').click(function () {
                                            $(".depSelectToEdit .total").val('');
                                            $(".depSelectToEdit .childChk").each(function () {
                                                if ($(".depSelectToEdit .childChk:checked").length < 4) {
                                                    if ($(this).prop('checked')) {
                                                        var childChkfirstValue = $(".depSelectToEdit .total").val();
                                                        if (childChkfirstValue == "") {
                                                            var allValues = childChkfirstValue + $(this).val();
                                                        } else
                                                        {
                                                            var allValues = childChkfirstValue + ", " + $(this).val();
                                                        }
                                                        $(".depSelectToEdit .total").val(allValues);
                                                    }
                                                } else
                                                {
                                                    var count = $('.depSelectToEdit .childChk:checked').length;
                                                    $(".depSelectToEdit .total").val(count + " Selected");
                                                }
                                            });

                                        });