在一个复选框更改后选择填充有多个条目的字段

Question

我有一些想法，但我不知道如何完成它，所以我希望我能在这里得到一些建议。

我正在开发一个活动注册应用程序（使用 Laravel），每个活动都会被注册。非常重要的是我们需要记录谁被邀请和谁实际参加。我已经在运行这部分了。我的问题更多是在实际方面。

我将 jQuery Select2 用于受邀者和与会者的多选字段。现在想象一下，有一组用户需要被邀请或参加几乎所有的活动，而其他人的邀请或参加取决于活动的类型。使用 Select2，我一次只能选择一个用户，如果您需要为几乎每个活动的 50 个用户执行此操作，那就太糟糕了。

拥有一个可以选择的“组”的最佳方法是什么，哪个选择会在选择字段中填写组中所有人员的名称？还是有更好的方法来完成这项工作？

我在脑海中看到了一些东西，选择字段旁边有复选框，代表组。当您勾选一个组的复选框时，选择字段将填充该组的所有用户。

我不知道这可以做到。我环顾四周，每次搜索都会弹出选择框来填充选择框。无处理复选框。

关于如何完成这项工作有什么建议吗？

我的 PHP/MySql 是中级，Javascript/Ajax 很基础。

Answer 1

一种策略是构建一个控件（复选框元素），该控件（复选框元素）将在用户单击时设置或切换用户组的选择。假设我们有以下标记：

<select class="my-big-group-select" multiple="multiple">
    <!-- assorted options here -->
</select>
<label>
    <input type="checkbox" class="toggle-default-group" />
    Use my default big group of users
</label>

Select2 API 允许您以编程方式控制它生成的组件。
你可以在这里阅读更多信息：https://select2.github.io/examples.html#programmatic

这是使用带有 Select2 的 jQuery 来利用这些知识的一种方法：

<script>
    var groupSelect = $('.my-big-group-select').select2();
    var groupToggle = $('.toggle-default-group');
    var myBigGroup = ["Aaron", "Beth", "Cindy"]; // assorted option values

    groupToggle.on("click", function() {
        if ($(this).is(':checked')) {
            groupSelect.val(myBigGroup).trigger('change');
        } else {
            var currentlySelected = groupSelect.val();
            if (currentlySelected) {
                var filteredSelections = currentlySelected.filter(function(key) {
                    return myBigGroup.indexOf(key) < 0;
                });
                groupSelect.val(filteredSelections).trigger('change');
            }
        }
    });
</script>

这是一个 CodePen，它显示了这一切：http://codepen.io/anon/pen/qNQKOd

当然，您可以在此基础上进行其他增强（例如，选择多个组的能力）。

作为替代方案，您可以考虑使用其他代码库，例如 Bootstrap Multiselect：https://davidstutz.github.io/bootstrap-multiselect/

希望这会为您指明正确的方向！