Làm cách nào để lấy tất cả các giá trị đã chọn từ <select multiple = multiple>?

Có vẻ kỳ lạ, tôi không thể tìm thấy câu hỏi này đã được hỏi, nhưng đây là nó!

Tôi có một html như sau:

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

Làm cách nào để lấy tất cả các giá trị (một mảng?) Mà người dùng đã chọn trong javascript?

Ví dụ: nếu người dùng đã chọn Bữa trưa và Đồ ăn nhẹ, tôi muốn một mảng {2, 4}.

Đây có vẻ như là một nhiệm vụ rất đơn giản nhưng tôi dường như không thể làm được.

Cảm ơn.

Cách thông thường:

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

Từ các tài liệu :

Trong trường hợp các <select multiple="multiple">phần tử, .val()phương thức trả về một mảng chứa mỗi tùy chọn đã chọn;

Trừ khi một câu hỏi yêu cầu JQuery, trước tiên câu hỏi phải được trả lời bằng javascript chuẩn vì nhiều người không sử dụng JQuery trong trang web của họ.

Từ RobG Làm thế nào để lấy tất cả các giá trị đã chọn của một hộp nhiều lựa chọn bằng 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;
}

Trên thực tế, tôi đã tìm thấy cách tốt nhất, ngắn gọn nhất, nhanh nhất và tương thích nhất bằng cách sử dụng JavaScript thuần túy (giả sử bạn không cần hỗ trợ đầy đủ IE lte 8) là:

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

CẬP NHẬT (14-02-2017):

Một cách ngắn gọn hơn nữa bằng cách sử dụng ES6 / ES2015 (dành cho các trình duyệt hỗ trợ nó):

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

Nếu bạn muốn đi theo cách hiện đại, bạn có thể làm như sau:

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

Các ...nhà khai thác bản đồ iterable ( HTMLOptionsCollection) để mảng.

Nếu bạn chỉ quan tâm đến các giá trị, bạn có thể thêm map()lệnh gọi:

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

Đầu tiên, sử dụng Array.fromđể chuyển đổi HTMLCollectionđối tượng thành một mảng.

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') sẽ chứa một mảng tất cả các mục đã chọn.

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

Các bác sĩ cho biết thêm:

Cập nhật tháng 10 năm 2019

Phần sau sẽ hoạt động "độc lập" trên tất cả các trình duyệt hiện đại mà không có bất kỳ sự phụ thuộc hoặc chuyển đổi nào.

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

Thử cái này:

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

Bản giới thiệu

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

vĩ cầm

nếu bạn muốn như bạn đã trình bày với các dấu ngắt sau mỗi giá trị;

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

Nếu bạn cần phản hồi các thay đổi, bạn có thể thử cách này:

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

Các [].slice.call(e.target.selectedOptions)là cần thiết vì e.target.selectedOptionslợi nhuận một HTMLCollection, không phải là một Array. Lời gọi đó chuyển đổi nó thành để Arraysau đó chúng ta có thể áp dụng maphàm, hàm này trích xuất các giá trị.

Một cái gì đó như sau sẽ là lựa chọn của tôi:

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

Nó ngắn, nó nhanh trên các trình duyệt hiện đại và chúng tôi không quan tâm nó có nhanh hay không trên các trình duyệt 1% thị phần.

Xin lưu ý, selectOptions đã có những hành vi khó hiểu trên một số trình duyệt từ khoảng 5 năm trước, do đó, việc đánh giá tác nhân người dùng không hoàn toàn nằm ngoài luồng ở đây.

Hoạt động ở mọi nơi mà không cần 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;
};