Question

我有一个下拉列表，其中包含组列表和组的相应项目。我想选择一个组，以便根据下拉列表中的组选择自动选择组项目

这是我的HTML代码：

<select id="example-multiple-optgroups" class="multiselect-group">
            <optgroup label="Group 1">
                <option value="1-1">Option 1.1</option>
                <option value="1-2" selected="selected">Option 1.2</option>
                <option value="1-3" selected="selected">Option 1.3</option>
            </optgroup>
            <optgroup label="Group 2">
                <option value="2-1">Option 2.1</option>
                <option value="2-2">Option 2.2</option>
                <option value="2-3">Option 2.3</option>
            </optgroup>
</select

和JavaScript：

 $('.multiselect-group').before('<input type="checkbox" />');
$(document).on('click', '.multiselect-group', function(event) {
    var checkAll = true;
    var $opts = $(this).parent().nextUntil(':has(.multiselect-group)'); 
    var $inactive = $opts.filter(':not(.active)'); 
    var $toggleMe = $inactive;
    if ($inactive.length == 0) { 
        $toggleMe = $opts;
        checkAll = false;
    }
    $toggleMe.find('input').click();
    $(this).parent().find('input').attr('checked', checkAll);
    event.preventDefault();
});

我正在尝试这些代码，但我没有得到正确的输出，请让我知道完成此操作的程序。

Answer 1

您可以使用plugin来实现此目的，以下是代码。要下载js和css文件，请Click Here 图片附有

    <head>
    <link href="css/multiple-select.css" rel="stylesheet"/>
    </head>
    <body>
    <select multiple="multiple">        

        <optgroup label="Group 1">
                <option value="1-1">Option 1.1</option>
                <option value="1-2" >Option 1.2</option>
                <option value="1-3" >Option 1.3</option>
            </optgroup>
            <optgroup label="Group 2">
                <option value="2-1">Option 2.1</option>
                <option value="2-2">Option 2.2</option>
                <option value="2-3">Option 2.3</option>
            </optgroup>

    </select>

    <script src="js/jquery.min.js"></script>
    <script src="js/multiple-select.js"></script>
    <script>
        $("select").multipleSelect({
            multiple: true,
            multipleWidth: 100,
            width: '100%'
        });
    </script>
</body>

在下拉列表中选择多个组

1 个答案: