通过单击 div 选择多选项

Question

我正在尝试通过单击不同的 div 或表格行来选择选择框上的多个选项。

我有一个名为 #events 的多项选择。

我正在使用下面的代码，它可以通过简单的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

感谢Zakaria 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>

Answer 2

您可以用逗号, 分隔多个值，例如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>