如何从 <select multiple=multiple> 中获取所有选定的值？

Question

看起来很奇怪，我找不到这个已经问过的，但它就在这里！

我有一个html如下：

<select id="select-meal-type" multiple="multiple">
    <option value="1">Breakfast</option>
    <option value="2">Lunch</option>
    <option value="3">Dinner</option>
    <option value="4">Snacks</option>
    <option value="5">Dessert</option>
</select>

如何获取用户在 javascript 中选择的所有值（一个数组？）？

例如，如果用户选择了午餐和小吃，我想要一个 { 2, 4 } 的数组。

这似乎应该是一个非常简单的任务，但我似乎做不到。

谢谢。

原文由 Kyle 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

通常的方式：

 var values = $('#select-meal-type').val();

从 文档：

对于 <select multiple="multiple"> 元素， .val() 方法返回一个包含每个选定选项的数组；

原文由 Felix Kling 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以将表单提交时的值作为数组获取，如下例所示：

 const form = document.getElementById('form-upload');

 form.addEventListener('change', (e) => {
 const formData = new FormData(form);
 const selectValue = formData.getAll('pets');
 console.log(selectValue);
 })

 <form id="form-upload">
 <select name="pets" multiple id="pet-select">
 <option value="">--Please choose an option--</option>
 <option value="dog">Dog</option>
 <option value="cat">Cat</option>
 <option value="hamster">Hamster</option>
 <option value="parrot">Parrot</option>
 <option value="spider">Spider</option>
 <option value="goldfish">Goldfish</option>
 </select>
 </form>

原文由 Guillaume Brioudes 发布，翻译遵循 CC BY-SA 4.0 许可协议