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

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

<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/

希望这能指引你朝着正确的方向前进！

选中一个复选框后，选择填充了多个条目的字段

1 个答案: