選中一個復選框后，選擇填充多個條目的字段

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/

希望這能為您指明正確的方向！