獲取所有選定的項目以及在 jquery 中單擊的位置

Question

我需要選擇選定的選項以及單擊它們的位置以使用 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>

Answer 1

要執行您需要的操作，請單獨將數組映射到選擇上，而不是他們選擇的選項上。 這將構建一個二維數組，每個選擇一個子項。

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