时间戳

首页 > 解决方案 > 获取所有选定的项目以及在 jquery 中单击它的位置

javascript - 获取所有选定的项目以及在 jquery 中单击它的位置

问题描述

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

我正在构建的表结构

HTML 结构

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

在 jquery 中选择它的最佳方法是什么，目前我正在选择所有选定的选项，如下所示：

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>

标签： javascripthtmljqueryselectsmarty

解决方案

要执行您需要的操作，将数组单独映射到选择上，而不是它们选择的选项上。这将构建一个二维数组，每个选择一个子项。

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

在我想将其标记为以下情况的情况下：第 1 周：选项 1、选项 2 等。第 2 周：选项 3、选项 4 等

在这种情况下，您可以构建一个由兄弟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>

推荐阅读