如何限制选择，只能在选项组内的多个选择的引导选择器

How to restrict selection, only within the option group in multiple selection of bootstrap selectpicker

本文关键字：选择 选择器 选项 何限制      更新时间：2023-09-26

在引导选择器中，对于多个选择，如何仅在一个选项组内限制选择。意思是，如果在一个选项组中选择了某些项，并且在另一个选项组中进行了新的选择，则先前的选择应被清除，只保留新选择。

首先获取引导选择器https://silviomoreto.github.io/bootstrap-select/

HTML 

<select class="selectpicker" title="Please Select" multiple data-max-options="4">
    <optgroup class="group1" label="GROUP1" data-max-options="2">
        <option class="group1_2 ">Item1</option>
        <option class="group1_2 ">Item2</option>
    </optgroup>
    <optgroup class="group2" label="GROUP2" data-max-options="2">
        <option class="group2_2 ">Item A</option>
        <option class="group2_2 ">Item B</option>
    </optgroup>
</select>
脚本

<script>
    $(document).ready(function () {
        $('.selectpicker').selectpicker();
        var flagGroup1 = 0;
        var flagGroup2 = 0;
        $(".group1_2").click(function() {
            if (flagGroup2 >= 1) {
                $(".selected").removeClass("selected");
                $('.selectpicker').selectpicker('deselectAll');
                flagGroup2 = 0;
                flagGroup1 = 1;
            }
            if ($( this ).parent().hasClass("selected")) {
                if (flagGroup1 > 1) {
                    flagGroup1 = 1;
                } else {
                    flagGroup1 = 0;
                }
            } else {
                flagGroup1 = flagGroup1 + 1;
            }
        });
        $(".group2_2").click(function() {
            if (flagGroup1 >= 1) {
                $(".selected").removeClass("selected");
                $('.selectpicker').selectpicker('deselectAll');
                flagGroup1 = 0;
                flagGroup2 = 1;
            }
            if ($( this ).parent().hasClass("selected")) {
                if (flagGroup2 > 1) {
                    flagGroup2 = 1;
                } else {
                    flagGroup2 = 0;
                }
            } else {
                flagGroup2 = flagGroup2 + 1;
            }
        });
    });
</script>
相关文章：