Selecting multi option select by clicking on div

Question

I'm trying to select multiple options on the select box by clicking on different divs or table row.

I have a multiple select named #events.

I'm using the code below which is fully functional with a simple selectbox but not with a multiple one.

$("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>

Possible duplicate of [Javascript/jQuery: Set Values (Selection) in a multiple Select](https://stackoverflow.com/questions/16582901/javascript-jquery-set-values-selection-in-a-multiple-select) — ControlAltDel, Apr 03 '19 at 15:13
Please edit your question and, at the bottom, press Ctrl+M. In the four quadrants of the pop-up editor, create a basic demo (it's okay if it doesn't work) that provides us with the HTML/css/js scaffolding of your question, so that we have something to work with. — cssyphus, Apr 03 '19 at 15:13

score 1 · Accepted Answer · answered Apr 03 '19 at 15:16

You could separate the multiple values by comma , like data-value="books,html" then split when you're selecting them.

NOTE: To update the view after selecting the options programmatically you could use .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>

that is a good way to do it but I don't know how I get the same with a value per div or table row. Your code snippet has de same problem with first two buttons. — Carlos Diaz, Apr 04 '19 at 06:59

score 0 · Answer 2 · answered Apr 04 '19 at 07:34

I SOLVED thanks to Zakaria Acharki's answer. However, I don't know if it's the best solution but it's working as I want.

I added a hidden input which will recieve all values I want to select.

After that I changed a little bit the JS code and add a new one.

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

Selecting multi option select by clicking on div

2 Answers2