通過單擊div選擇多選項選擇

Question

我試圖通過單擊不同的div或表行在選擇框上選擇多個選項。

我有一個名為#events的多個選擇。

我正在使用下面的代碼，該代碼功能齊全，只有一個簡單的選擇selectbox但沒有多個選擇selectbox 。

 $("td.eventID").on("click", function(e) { var $select = $("select#events"); $select.val($(this).data("value")); // simulate click: $select.find(":selected").click(); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tbody> <tr> <td class="eventID" data-value="1" style="cursor:pointer;"> FirstEventName </td> </tr> <tr> <td class="eventID" data-value="11" style="cursor:pointer;"> EV_Hildegard Spinka </td> </tr> <tr> <td class="eventID" data-value="14" style="cursor:pointer;"> EV_Melody Parker </td> </tr> <tr> <td class="eventID" data-value="4" style="cursor:pointer;"> EV_Theodore Auer </td> </tr> <tr> <td class="eventID" data-value="17" style="cursor:pointer;"> EV_Aditya Stracke </td> </tr> </tbody> </table> <select name="events[]" id="events" class="form-control" multiple="" required=""> <option value="1">FirstEventName</option> <option value="14">EV_Melody Parker</option> <option value="4">EV_Theodore Auer</option> <option value="17">EV_Aditya Stracke</option> <option value="11">EV_Hildegard Spinka</option> </select> 

Answer 1

您可以用逗號分隔多個值,例如data-value="books,html"然后在選擇它們時拆分。

注意：要以編程方式選擇選項后更新視圖，您可以使用.change()

 $(".eventID").on("click", function(e) { $("#events").val($(this).data("value").split(',')).change(); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="events" multiple> <option value="books">Books</option> <option value="html">HTML</option> <option value="css">CSS</option> <option value="php">PHP</option> <option value="js">JavaScript</option> </select> <button class="eventID" data-value="css">css</button> <button class="eventID" data-value="php">php</button> <button class="eventID" data-value="books,html">Books + html</button> 

Answer 2

我解決了由於扎卡里亞Acharki的答案 。 但是，我不知道它是否是最好的解決方案，但它正在按我的意願工作。

我添加了一個隱藏的輸入，它將接收我想要選擇的所有值。

之后我改變了一些JS代碼並添加了一個新代碼。

    // This code add values to the hidden input with "," and then, selecting every value on multiple select
    $("td.eventID").on("click", function(e) {
        var group = $('#groupingEvents');
        var groupValues = group.val();

        if(groupValues == "") {
            group.val($(this).data("value") + ',');
        } else
            group.val(groupValues + $(this).data("value"));

        $("#events").val(group.val().split(',')).change();
    });

    // This code is used if you click the selectbox to choose a new option, you need to send values to hidden input, otherwise, a bug appears.
    $("#events").on("click", function() {
        var group = $('#groupingEvents');
        var selectValues = $(this).val();

        if(group.val() == "") {
            group.val(selectValues.join(","));
        } else
            group.val(selectValues.join(",") + ',')
    });

 $("td.eventID").on("click", function(e) { var group = $('#groupingEvents'); var groupValues = group.val(); if(groupValues == "") { group.val($(this).data("value") + ','); } else group.val(groupValues + $(this).data("value")); $("#events").val(group.val().split(',')).change(); }); $("#events").on("click", function() { var group = $('#groupingEvents'); var selectValues = $(this).val(); if(group.val() == "") { group.val(selectValues.join(",")); } else group.val(selectValues.join(",") + ',') }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tbody> <tr> <td class="eventID" data-value="1" style="cursor:pointer;"> FirstEventName </td> </tr> <tr> <td class="eventID" data-value="11" style="cursor:pointer;"> EV_Hildegard Spinka </td> </tr> <tr> <td class="eventID" data-value="14" style="cursor:pointer;"> EV_Melody Parker </td> </tr> <tr> <td class="eventID" data-value="4" style="cursor:pointer;"> EV_Theodore Auer </td> </tr> <tr> <td class="eventID" data-value="17" style="cursor:pointer;"> EV_Aditya Stracke </td> </tr> </tbody> </table> <input type="hidden" id="groupingEvents" value=""> <select name="events[]" id="events" class="form-control" multiple="" required=""> <option value="1">FirstEventName</option> <option value="14">EV_Melody Parker</option> <option value="4">EV_Theodore Auer</option> <option value="17">EV_Aditya Stracke</option> <option value="11">EV_Hildegard Spinka</option> </select>