다중 선택 상자에서 선택한 모든 값을 가져오는 방법은 무엇입니까?

다중 선택 상자에서 선택한 모든 값을 가져오는 방법은 무엇입니까?

나는 있습니다<select>와의 요소.multiple기여하다.JavaScript를 사용하여 이 요소의 선택된 값을 가져오려면 어떻게 해야 합니까?

제가 시도하고 있는 것은 다음과 같습니다.

function loopSelected() { 
    var txtSelectedValuesObj = document.getElementById('txtSelectedValues');
    var selectedArray = new Array();
    var selObj = document.getElementById('slct'); 
    var i;
    var count = 0;
    for (i=0; i<selObj.options.length; i++) { 
        if (selObj.options[i].selected) {
            selectedArray[count] = selObj.options[i].value;
            count++; 
        } 
    } 
    txtSelectedValuesObj.value = selectedArray;
}

jQuery 없음:

// Return an array of the selected opion values
// select is an HTML select element
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;
}

간단한 예:

<select multiple>
  <option>opt 1 text
  <option value="opt 2 value">opt 2 text
</select>
<button onclick="
  var el = document.getElementsByTagName('select')[0];
  alert(getSelectValues(el));
">Show selected values</button>

jQuery의 일반적인 방법은 다음과 같습니다.

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

문서에서:

의 경우에는<select multiple="multiple">요소들, 더.val()method는 선택한 각 옵션을 포함하는 배열을 반환합니다.

실제로 순수 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);

사용할 수 있습니다.selectedOptions소유물

var options = document.getElementById('select-meal-type').selectedOptions;
var values = Array.from(options).map(({ value }) => value);
console.log(values);

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

ES6

[...select.options].filter(option => option.selected).map(option => option.value)

어디에select에 대한 참조입니다.<select>원소의

분해 방법:

• [...select.options]Array.prototype 메서드를 사용할 수 있도록 Array와 유사한 옵션 목록을 사용하고 이를 분해합니다(편집: 사용도 고려해 보십시오).Array.from())
• filter(...)옵션을 선택한 옵션으로만 줄입니다.
• map(...)원시 변환<option>각각의 가치에 포함되는 요소들

현대적인 방식을 원한다면 다음과 같이 할 수 있습니다.

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

그...연산자 맵sitable(HTMLOptionsCollection배열로 이동합니다.

값에만 관심이 있는 경우 다음을 추가할 수 있습니다.map()호출:

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

체크아웃:

HTML:

<a id="aSelect" href="#">Select</a>
<br />
<asp:ListBox ID="lstSelect" runat="server"  SelectionMode="Multiple" Width="100px">
    <asp:ListItem Text="Raj" Value="1"></asp:ListItem>
    <asp:ListItem Text="Karan" Value="2"></asp:ListItem>
    <asp:ListItem Text="Riya" Value="3"></asp:ListItem>
    <asp:ListItem Text="Aman" Value="4"></asp:ListItem>
    <asp:ListItem Text="Tom" Value="5"></asp:ListItem>
</asp:ListBox>

질문:

$("#aSelect").click(function(){
    var selectedValues = [];    
    $("#lstSelect :selected").each(function(){
        selectedValues.push($(this).val()); 
    });
    alert(selectedValues);
    return false;
});

데모를 보려면 여기를 클릭하십시오.

첫째, 사용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

multiSelect가 Multiple-Select-Element라고 가정하고 선택한 Options Property를 사용합니다.

//show all selected options in the console:

for ( var i = 0; i < multiSelect.selectedOptions.length; i++) {
  console.log( multiSelect.selectedOptions[i].value);
}

$('#select-meal-type :selected')선택한 모든 항목의 배열을 포함합니다.

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

​

이미 제안한 것과 거의 같지만 조금 다릅니다.바닐라 JS의 jQuery만큼의 코드:

selected = Array.prototype.filter.apply(
  select.options, [
    function(o) {
      return o.selected;
    }
  ]
);

IE, FF, Safari의 루프보다 빠른 것 같습니다.크롬과 오페라에서 더 느리다는 것이 흥미롭습니다.

또 다른 접근 방식은 실렉터를 사용하는 것입니다.

selected = Array.prototype.map.apply(
    select.querySelectorAll('option[selected="selected"]'),
    [function (o) { return o.value; }]
);

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>

변경사항에 대응해야 하는 경우 다음을 수행할 수 있습니다.

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값을 추출하는 함수입니다.

확인:

HTML:

<select id="test" multiple>
<option value="red" selected>Red</option>
<option value="rock" selected>Rock</option>
<option value="sun">Sun</option>
</select>

자바스크립트 한 줄 코드

Array.from(document.getElementById("test").options).filter(option => option.selected).map(option => option.value);

각 값 뒤에 구분 기호를 사용하여 표현한 대로 하려면,

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

사용해 보십시오.

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

만지작거리다

ES6 구현은 다음과 같습니다.

value = Array(...el.options).reduce((acc, option) => {
  if (option.selected === true) {
    acc.push(option.value);
  }
  return acc;
}, []);

Rick Viscomi의 답변을 바탕으로 HTML Select Element의 선택된 Options 속성을 사용해 보십시오.

let txtSelectedValuesObj = document.getElementById('txtSelectedValues');
[...txtSelectedValuesObj.selectedOptions].map(option => option.value);

자세히 말하자면,

• selectedOptions선택한 항목의 목록을 반환합니다.
• 특히 HTMLOptionElements가 포함된 읽기 전용 HTMLCollection을 반환합니다.
• ...확산 구문입니다.그것은 그것을 통해HTMLCollection의 요소들.
• [...]을 만듭니다.Array, 에게 이요들로부객체터배, 에게제공다니합열을당의 합니다.HTMLOptionElements.
• map() 각을대다니합을 대체합니다.HTMLObjectElement서는 배로여이(기서라함열여함)()라고 함)option) 그 가치와 함께 (option.value).

밀도는 높지만 효과가 있는 것 같습니다.

조해.selectedOptions IE에서 지원되지 않습니다!

로 배로값 얻수있다니에서 수 .<select>다음할 때: 다음과 같이 합니다.

const form = document.getElementById('form-upload');

form.addEventListener('change', (e) => {
    const formData = new FormData(form);
    const selectValue = formData.getAll('pets');
    console.log(selectValue);
})

<form id="form-upload">
  <select name="pets" multiple id="pet-select">
      <option value="">--Please choose an option--</option>
      <option value="dog">Dog</option>
      <option value="cat">Cat</option>
      <option value="hamster">Hamster</option>
      <option value="parrot">Parrot</option>
      <option value="spider">Spider</option>
      <option value="goldfish">Goldfish</option>
  </select>
</form>

다음과 같은 것이 제가 선택할 수 있습니다.

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

그것은 짧고, 현대의 브라우저에서는 빠르며, 1% 시장 점유율 브라우저에서는 빠르든 말든 우리는 신경 쓰지 않습니다.

참고로, 선택한 옵션은 약 5년 전의 일부 브라우저에서 이상한 동작을 하므로 사용자 에이전트 스니핑이 여기서 완전히 벗어난 것은 아닙니다.

이 스크립트를 사용할 수 있습니다.

     <!DOCTYPE html>
    <html>
    <script>
    function getMultipleSelectedValue()
    {
      var x=document.getElementById("alpha");
      for (var i = 0; i < x.options.length; i++) {
         if(x.options[i].selected ==true){
              alert(x.options[i].value);
          }
      }
    }
    </script>
    </head>
    <body>
    <select multiple="multiple" id="alpha">
      <option value="a">A</option>
      <option value="b">B</option>
      <option value="c">C</option>
      <option value="d">D</option>
    </select>
    <input type="button" value="Submit" onclick="getMultipleSelectedValue()"/>
    </body>
    </html>

사용할 수 있습니다.[].reduceRobG의 접근 방식을 보다 간결하게 구현하기 위해:

var getSelectedValues =  function(selectElement) {
  return [].reduce.call(selectElement.options, function(result, option) {
    if (option.selected) result.push(option.value);
    return result;
  }, []);
};

내 템플릿 도우미는 다음과 같습니다.

 'submit #update': function(event) {
    event.preventDefault();
    var obj_opts = event.target.tags.selectedOptions; //returns HTMLCollection
    var array_opts = Object.values(obj_opts);  //convert to array
    var stray = array_opts.map((o)=> o.text ); //to filter your bits: text, value or selected
    //do stuff
}

이전 답변과 동일하지만 언더스코어.js를 사용합니다.

function getSelectValues(select) {
    return _.map(_.filter(select.options, function(opt) { 
        return opt.selected; }), function(opt) { 
            return opt.value || opt.text; });
}

모든 곳에서 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;
};

여기.

const arr = Array.from(el.features.selectedOptions) //get array from selectedOptions property
const list = [] 
arr.forEach(item => list.push(item.value)) //push each item to empty array
console.log(list)

$('#application_student_groups option:selected').toArray().map(item => item.value)

이렇게 자신만의 기능을 만들어 어디서나 사용할 수 있습니다.

Pure JS

/**
* Get values from multiple select input field
* @param {string} selectId - the HTML select id of the select field
**/
function getMultiSelectValues(selectId) {
 // get the options of select field which will be HTMLCollection
 // remember HtmlCollection and not an array. You can always enhance the code by
 // verifying if the provided select is valid or not
  var options = document.getElementById(selectId).options; 
    var values = [];
    
   // since options are HtmlCollection, we convert it into array to use map function on it
    Array.from(options).map(function(option) {
        option.selected ? values.push(option.value) : null
    })

    return values;
}

한 줄에 jQuery를 사용하면 동일한 결과를 얻을 수 있습니다.

$('#select_field_id').val()

그러면 웰의 값 배열이 반환됩니다.

언급URL : https://stackoverflow.com/questions/11821261/how-to-get-all-selected-values-from-select-multiple-multiple