จะรับค่าที่เลือกทั้งหมดจาก <select multiple = multiple> ได้อย่างไร

ดูเหมือนแปลกฉันไม่พบสิ่งนี้ที่ถามไปแล้ว แต่นี่มันไปแล้ว!

ฉันมี 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>

ฉันจะรับค่าทั้งหมด (อาร์เรย์) ที่ผู้ใช้เลือกในจาวาสคริปต์ได้อย่างไร

ตัวอย่างเช่นหากผู้ใช้เลือกอาหารกลางวันและของว่างฉันต้องการอาร์เรย์เป็น {2, 4}

ดูเหมือนว่ามันจะเป็นงานง่ายๆ แต่ดูเหมือนจะทำไม่ได้

ขอบคุณ.

วิธีปกติ:

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

จากเอกสาร :

ในกรณีของ<select multiple="multiple">องค์ประกอบ.val()เมธอดจะส่งคืนอาร์เรย์ที่มีตัวเลือกที่เลือกไว้

เว้นแต่คำถามจะถาม JQuery คำถามควรได้รับคำตอบก่อนในจาวาสคริปต์มาตรฐานเนื่องจากหลาย ๆ คนไม่ได้ใช้ JQuery ในไซต์ของตน

จาก 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;
}

อันที่จริงฉันพบวิธีที่ดีที่สุดสั้นที่สุดเร็วที่สุดและเข้ากันได้มากที่สุดโดยใช้ 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);

หากคุณต้องการไปทางที่ทันสมัยคุณสามารถทำได้:

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

ตัว...ดำเนินการแมปซ้ำได้ ( HTMLOptionsCollection) กับอาร์เรย์

หากคุณสนใจเพียงแค่ค่าคุณสามารถเพิ่มการmap()โทร:

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

ขั้นแรกให้ใช้Array.fromเพื่อแปลงHTMLCollectionวัตถุเป็นอาร์เรย์

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') จะมีอาร์เรย์ของรายการที่เลือกทั้งหมด

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

​

อัปเดตตุลาคม 2019

สิ่งต่อไปนี้ควรทำงานแบบ "สแตนด์อะโลน" บนเบราว์เซอร์สมัยใหม่ทั้งหมดโดยไม่มีการอ้างอิงหรือการถ่ายโอนข้อมูลใด ๆ

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

ลองสิ่งนี้:

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

ซอ

หากคุณต้องการตามที่คุณแสดงด้วยตัวแบ่งหลังจากแต่ละค่า

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

หากคุณต้องการตอบสนองต่อการเปลี่ยนแปลงคุณสามารถลองสิ่งนี้:

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ฟังก์ชันซึ่งดึงค่าออกมาได้

สิ่งต่อไปนี้จะเป็นทางเลือกของฉัน:

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 ปีที่แล้วดังนั้นการดมกลิ่นของตัวแทนผู้ใช้จึงไม่อยู่ในบรรทัดที่นี่

คุณสามารถใช้ได้ 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>

ทำงานได้ทุกที่โดยไม่ต้องใช้ 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;
};