15 に答える
多くの人が自分のサイトで JQuery を使用していないため、質問が JQuery を要求しない限り、最初に標準の JavaScript で質問に回答する必要があります。
RobG から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;
}
通常の方法:
var values = $('#select-meal-type').val();
ドキュメントから:
<select multiple="multiple">
要素の場合、.val()
メソッドは選択された各オプションを含む配列を返します。
実際、純粋な 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;
});
更新 (2017-02-14):
ES6/ES2015 を使用したさらに簡潔な方法 (それをサポートするブラウザーの場合):
const selected = document.querySelectorAll('#select-meal-type option:checked');
const values = Array.from(selected).map(el => el.value);
$('#select-meal-type :selected')
選択したすべてのアイテムの配列が含まれます。
$('#select-meal-type option:selected').each(function() {
alert($(this).val());
});
</p>
変更に対応する必要がある場合は、これを試すことができます。
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
これを試して:
$('#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>
次のようなものが私の選択です:
let selectElement = document.getElementById('categorySelect');
let selectedOptions = selectedElement.selectedOptions || [].filter.call(selectedElement.options, option => option.selected);
let selectedValues = [].map.call(selectedOptions, option => option.value);
短く、最新のブラウザーでは高速で、市場シェア 1% のブラウザーで高速かどうかは気にしません。
selectedOptions は、約 5 年前から一部のブラウザーでおかしな動作をすることに注意してください。