javascript - 将选择多个输入转换为 bool 数组

Question

获取表示是否选择该选项的 bool 值数组的最佳方法是什么？

例如:

当标记为:

<select id="myMultipleSelect" multiple>
    <option selected>Urgent</option>
    <option selected>Important</option>
    <option selected>Other</option>
</select>

所需的结果数组应构造为:

• 所有选项均已选中:[true,true,true]。

• 仅选择紧急选项:[true,false,false]。

• 选择紧急、重要选项:[true,true,false]。

<小时/>

我尝试使用 $.val() 但它返回(当选择所有选项时)["Urgent","Important","Other"] 或 Urgent 仅选择选项才会返回:["Urgent"]

$('#myMultipleSelect').on('change', event => {               
    console.log($(event.currentTarget).val());
});

有什么优雅的方式来实现这个目标吗？

Answer 1

您可以使用 jQuery .get() 的组合和 Array#map

• $('option',this) 从您的 select 中选择每个 option

• .get() 从 jQuery 选择器返回 Javascript DOM 元素

• .map() 遍历您的数组

• $(e).is(':selected') 如果您的选项已选择或未选择，则返回 true 或 false

$('#myMultipleSelect').on('change', function(){               
    console.log($('option',this).get().map(e => $(e).is(':selected')));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="myMultipleSelect" multiple>
    <option selected>Urgent</option>
    <option selected>Important</option>
    <option selected>Other</option>
</select>