<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 년 10 월 업데이트

다음은 종속성이나 트랜스 파일없이 모든 최신 브라우저에서 "독립 실행 형"으로 작동합니다.

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