get all selected items and where it was clicked at jquery

Question

I need to select the selected options and where they were clicked to store the information using jquery.

The table structure i am building

HTML STRUCTURE

I need to know which options where clicked for both weeks, so for example person has chosen option 1 and 2 for week 1 and option 3 and 4 for week 2

What's the best way of selecting this in jquery, currently i am selecting all the selected options like this:

let selected = $("select > option:selected")
    .map(function () {
        return this.value;
    })
    .get();



<table id="table_id">
            {foreach from=$DATA_EXAMPLES key=key item=DATA_EXAMPLE}
                <th>{$DATA_EXAMPLE}</th>
                    <td>
                        <select id="option_id" name="options_name" multiple size="5">
                            {foreach from=$SOME_DATAS item=SOME_DATA}
                                <option value="{$SOME_DATA}">{$SOME_DATA}</option>
                            {/foreach}
                        </select>
                    </td>    
            {/foreach}  
    </table>

Answer 1

To do what you require map the array on the selects individually, not their selected options. This will build a 2d array, one child item per select.

$('select').on('change', () => {
  let selected = $("select").map((i, el) => [$(el).val()]).get();
  console.log(selected);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table_id">
  <th>Week 1</th>
  <td>
    <select name="options_name" multiple size="5">
      <option value="Option 1">Option 1</option>
      <option value="Option 2">Option 2</option>
      <option value="Option 3">Option 3</option>
      <option value="Option 4">Option 4</option>
      <option value="Option 5">Option 5</option>
    </select>
  </td>
  <th>Week 2</th>
  <td>
    <select name="options_name" multiple size="5">
      <option value="Option 1">Option 1</option>
      <option value="Option 2">Option 2</option>
      <option value="Option 3">Option 3</option>
      <option value="Option 4">Option 4</option>
      <option value="Option 5">Option 5</option>
    </select>
  </td>
</table>

In the case where i would want to label it as following : Week 1 : Option 1, Option 2, etc.. Week 2: Option 3, Option 4, etc

In that case you could build an object keyed by the value in the sibling th element:

$('select').on('change', () => {
  let selected = $("select").map((i, el) => ({
    [el.parentElement.previousElementSibling.textContent]: $(el).val()
  })).get();
  console.log(selected);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table_id">
  <th>Week 1</th>
  <td>
    <select name="options_name" multiple size="5">
      <option value="Option 1">Option 1</option>
      <option value="Option 2">Option 2</option>
      <option value="Option 3">Option 3</option>
      <option value="Option 4">Option 4</option>
      <option value="Option 5">Option 5</option>
    </select>
  </td>
  <th>Week 2</th>
  <td>
    <select name="options_name" multiple size="5">
      <option value="Option 1">Option 1</option>
      <option value="Option 2">Option 2</option>
      <option value="Option 3">Option 3</option>
      <option value="Option 4">Option 4</option>
      <option value="Option 5">Option 5</option>
    </select>
  </td>
</table>