获取所有选定的项目以及在 jquery 处单击的位置

Question

我需要 select selected 选项以及单击它们的位置以使用 jquery 存储信息。

The table structure i am building

HTML STRUCTURE

我需要知道这两个星期都点击了哪些选项，例如有人在第 1 周选择了选项 1 和 2，在第 2 周选择了选项 3 和 4

在 jquery 中 select 执行此操作的最佳方法是什么，目前我正在 select 执行所有 selected 选项，如下所示：

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

要执行您需要的操作，请将数组单独映射到 select，而不是它们的 selected 选项。这将构建一个二维数组，每个 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

在这种情况下，您可以构建一个由同级 th 元素中的值作为键的对象：

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

获取所有选定的项目以及在 jquery 处单击的位置

get all selected items and where it was clicked at jquery

html

javascript

jquery

select

smarty