如何从<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选择？

例如，如果用户选择了Lunch和Snacks，我想要一个{2,4}数组。

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

谢谢。

Answer 1

的常用方法：

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

从docs：

在<select multiple="multiple">元件的情况下，所述.val()方法返回包含每个选择的选项的阵列;

Answer 2

$('#select-meal-type :selected')将包含所有选定项目的数组。

$('#select-meal-type option:selected').each(function() { 
    alert($(this).val()); 
}); 

Answer 3

试试这个：

$('#select-meal-type').change(function(){ 
    var arr = $(this).val() 
}); 

演示

$('#select-meal-type').change(function(){ 
 
    var arr = $(this).val(); 
 
    console.log(arr) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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>

fiddle

Answer 4

如果你想要你在每个值之后用break来表示;

$('#select-meal-type').change(function(){ 
    var meals = $(this).val(); 
    var selectedmeals = meals.join(", "); // there is a break after comma 

    alert (selectedmeals); // just for testing what will be printed 
}) 

Answer 5

除非问题要求JQuery，否则问题应该首先在标准javascript中回答，因为许多人不在他们的站点中使用JQuery。

从RobG How to get all selected values of a multiple select box using JavaScript?：

function getSelectValues(select) { 
    var result = []; 
    var options = select && select.options; 
    var opt; 

    for (var i=0, iLen=options.length; i<iLen; i++) { 
    opt = options[i]; 

    if (opt.selected) { 
     result.push(opt.value || opt.text); 
    } 
    } 
    return result; 
} 

Answer 6

其实，我发现使用纯JavaScript是最好的，最简洁，最快速，最兼容的方式（假设你不需要完全支持IE LTE 8）在下面的：

var values = Array.prototype.slice.call(document.querySelectorAll('#select-meal-type option:checked'),0).map(function(v,i,a) { 
    return v.value; 
}); 

UPDATE（2017年2月14日）：

一种即使使用ES6/ES2更简洁的方式015（用于支持它的浏览器）：

const selected = document.querySelectorAll('#select-meal-type option:checked'); 
const values = Array.from(selected).map((el) => el.value); 

Answer 7

如果需要对变化做出反应，你可以试试这个：

document.getElementById('select-meal-type').addEventListener('change', function(e) { 
    let values = [].slice.call(e.target.selectedOptions).map(a => a.value)); 
}) 

需要的[].slice.call(e.target.selectedOptions)因为e.target.selectedOptions返回HTMLCollection，不是Array 。该调用将其转换为Array，以便我们可以应用提取值的map函数。

Answer 8

到处作品，未经jQuery的：

var getSelectValues = function (select) { 
    var ret = []; 

    // fast but not universally supported 
    if (select.selectedOptions != undefined) { 
     for (var i=0; i < select.selectedOptions.length; i++) { 
      ret.push(select.selectedOptions[i].value); 
     } 

    // compatible, but can be painfully slow 
    } else { 
     for (var i=0; i < select.options.length; i++) { 
      if (select.options[i].selected) { 
       ret.push(select.options[i].value); 
      } 
     } 
    } 
    return ret; 
};