Bagaimana cara mendapatkan semua nilai yang dipilih dari <select multiple = multiple>?

Tampak aneh saya tidak bisa menemukan yang ini sudah diminta, tapi ini dia!

Saya memiliki html sebagai berikut:

<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>

Bagaimana cara mendapatkan semua nilai (array?) Yang telah dipilih pengguna di javascript?

Misalnya, jika pengguna telah memilih Makan Siang dan Makanan Ringan, saya ingin array {2, 4}.

Sepertinya ini adalah tugas yang sangat sederhana tetapi sepertinya saya tidak bisa melakukannya.

Terima kasih.

Cara biasa:

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

Dari dokumen :

Dalam kasus <select multiple="multiple">elemen, .val()metode mengembalikan larik yang berisi setiap opsi yang dipilih;

Kecuali jika pertanyaan menanyakan JQuery, pertanyaan tersebut harus dijawab terlebih dahulu dalam javascript standar karena banyak orang tidak menggunakan JQuery di situs mereka.

Dari RobG Bagaimana cara mendapatkan semua nilai yang dipilih dari beberapa kotak pilih menggunakan 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;
}

Sebenarnya, saya menemukan cara terbaik, paling ringkas, tercepat, dan paling kompatibel menggunakan JavaScript murni (dengan asumsi Anda tidak perlu mendukung penuh IE lte 8) adalah sebagai berikut:

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

UPDATE (2017-02-14):

Cara yang lebih ringkas menggunakan ES6 / ES2015 (untuk browser yang mendukungnya):

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

Jika Anda ingin menggunakan cara modern, Anda dapat melakukan ini:

const selectedOpts = [...field.options].filter((x) => x.selected);

The ...Operator peta iterable ( HTMLOptionsCollection) untuk array.

Jika Anda hanya tertarik dengan nilainya, Anda dapat menambahkan map()panggilan:

const selectedValues = [...field.options]
                     .filter((x) => x.selected)
                     .map((x)=>x.value);

Pertama, gunakan Array.fromuntuk mengonversi HTMLCollectionobjek menjadi array.

let selectElement = document.getElementById('categorySelect')
let selectedValues = Array.from(selectElement.selectedOptions)
        .map(option => option.value) // make sure you know what '.map' does

// you could also do: selectElement.options

$('#select-meal-type :selected') akan berisi array dari semua item yang dipilih.

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

</s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> orang </s>

Perbarui Oktober 2019

Berikut ini seharusnya berfungsi "berdiri sendiri" di semua browser modern tanpa ketergantungan atau transparansi apa pun.

<!-- display a pop-up with the selected values from the <select> element -->

<script>
 const showSelectedOptions = options => alert(
   [...options].filter(o => o.selected).map(o => o.value)
 )
</script>

<select multiple onchange="showSelectedOptions(this.options)">
  <option value='1'>one</option>
  <option value='2'>two</option>
  <option value='3'>three</option>
  <option value='4'>four</option>
</select>

Coba ini:

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

Demo

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

biola

jika Anda ingin seperti yang Anda ungkapkan dengan jeda setelah setiap nilai;

$('#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
})

Jika Anda perlu menanggapi perubahan, Anda dapat mencoba ini:

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

The [].slice.call(e.target.selectedOptions)diperlukan karena e.target.selectedOptionspengembalian suatu HTMLCollection, bukan Array. Panggilan itu mengubahnya menjadi Arraysehingga kita dapat menerapkan mapfungsi yang mengekstrak nilainya.

Sesuatu seperti berikut ini akan menjadi pilihan saya:

let selectElement = document.getElementById('categorySelect');
let selectedOptions = selectedElement.selectedOptions || [].filter.call(selectedElement.options, option => option.selected);
let selectedValues = [].map.call(selectedOptions, option => option.value);

Singkatnya, cepat di browser modern, dan kami tidak peduli apakah cepat atau tidak di browser pangsa pasar 1%.

Perhatikan, selectedOptions memiliki perilaku miring di beberapa browser dari sekitar 5 tahun yang lalu, jadi petunjuk agen pengguna tidak sepenuhnya keluar jalur di sini.

Kamu bisa memakai selectedOptions

var selectedValues = Array.from(document.getElementById('select-meal-type').selectedOptions).map(el=>el.value);
console.log(selectedValues);

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

Bekerja di mana saja tanpa 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;
};