How to get all selected values from select multiple multiple

Question

Seemed odd I couldn t find this one already asked  but here it goes   I have an html  as follows    lt select id  select-meal-type  multiple  multiple  gt       lt option value  1  gt Breakfast lt  option gt       lt option value  2  gt Lunch lt  option gt       lt option value  3  gt Dinner lt  option gt       lt option value  4  gt Snacks lt  option gt       lt option value  5  gt Dessert lt  option gt   lt  select gt    How do I get all the values an array   that the user has selected in javascript   For example  if the user has selected Lunch and Snacks  I want an array of   2  4     This seems like it should be a very simple task but I can t seem to do it    Thanks

User · Answer

If you have multiple select boxes with multiple='multiple' and you want to select all selected options from every dropdown then use this HTML:

<select id='Alphabets'>
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
</select>

<select id='Alphabets' multiple='multiple'>
    <option value="4">D</option>
    <option value="5">E</option>
    <option value="6">F</option>
</select>
<select id='Alphabets'>
    <option value="7">G</option>
    <option value="8">H</option>
    <option value="9">I</option>
</select>
<select id='Alphabets' multiple='multiple'>
    <option value="10">J</option>
    <option value="11">K</option>
    <option value="12">L</option>
</select>

JavaScript for above UI:

function show_Alphebets()
{
        var tag =document.querySelectorAll("select");        
        var values="";
        for(var i=1; i<4; i++) {
            if(tag[i].options.length>0)
            for (var option of tag[i].selectedOptions) {                  
                  values+= i+"(multiple)="+option.value+",";
            }
            else values+= i+"="+tag[i].value+",";
        }
        alert(values);
}

User · Answer

application student groups option selected   toArray   map item   gt  item value

User · Answer

Actually  I found the best  most-succinct  fastest  and most-compatible way using pure JavaScript  assuming you don t need to fully support IE lte 8  is the following   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    An even more succinct way using ES6 ES2015  for the browsers that support it    const selected   document querySelectorAll   select-meal-type option checked    const values   Array from selected  map el   gt  el value

User · Answer

if you want as you expressed with breaks after each 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

User · Answer

The usual way   var values       select-meal-type   val      From the docs      In the case of  lt select multiple  multiple  gt  elements  the  val   method returns an array containing each selected option

User · Answer

Works everywhere without jquery   var getSelectValues   function  select        var ret               fast but not universally supported     if  select selectedOptions    undefined            for  var i 0  i  lt  select selectedOptions length  i                  ret push select selectedOptions i  value                     compatible  but can be painfully slow       else           for  var i 0  i  lt  select options length  i                  if  select options i  selected                    ret push select options i  value                                     return ret

User · Answer

Update October 2019  The following should work  stand-alone  on all modern browsers without any dependencies or transpilation    lt  -- display a pop-up with the selected values from the  lt select gt  element -- gt    lt script gt   const showSelectedOptions   options   gt  alert         options  filter o   gt  o selected  map o   gt  o value      lt  script gt    lt select multiple onchange  showSelectedOptions this options   gt     lt option value  1  gt one lt  option gt     lt option value  2  gt two lt  option gt     lt option value  3  gt three lt  option gt     lt option value  4  gt four lt  option gt   lt  select gt

User · Answer

If you need to respond to changes  you can try this   document getElementById  select-meal-type   addEventListener  change   function e        let values      slice call e target selectedOptions  map a   gt  a value         The    slice call e target selectedOptions  is needed because e target selectedOptions returns a HTMLCollection  not an Array  That call converts it to Array so that we can then apply the map function  which extract the values

User · Answer

If you wanna go the modern way  you can do this   const selectedOpts       field options  filter  x    gt  x selected     The     operator maps iterable  HTMLOptionsCollection  to the array   If you re just interested in the values  you can add a map   call   const selectedValues       field options                        filter  x    gt  x selected                        map  x   gt x value

User · Answer

First  use Array from to convert the HTMLCollection object to an array   let selectElement   document getElementById  categorySelect   let selectedValues   Array from selectElement selectedOptions           map option   gt  option value     make sure you know what   map  does     you could also do  selectElement options

User · Answer

You can use selectedOptions  x000D   x000D  var selectedValues   Array from document getElementById  select-meal-type   selectedOptions  map el  gt el value   console log selectedValues   x000D   lt select id  select-meal-type  multiple  multiple  gt       lt option value  1  gt Breakfast lt  option gt       lt option value  2  selected gt Lunch lt  option gt       lt option value  3  gt Dinner lt  option gt       lt option value  4  selected gt Snacks lt  option gt       lt option value  5  gt Dessert lt  option gt   lt  select gt  x000D   x000D   x000D

User · Answer

Unless a question asks for JQuery the question should be first answered in standard javascript as many people do not use JQuery in their sites   From RobG How to get all selected values of a multiple select box using JavaScript      function getSelectValues select      var result         var options   select  amp  amp  select options    var opt     for  var i 0  iLen options length  i lt iLen  i          opt   options i        if  opt selected          result push opt value    opt text               return result

User · Answer

Try this       select-meal-type   change function        var arr     this  val         Demo   x000D   x000D      select-meal-type   change function    x000D    var arr     this  val    x000D    console log arr  x000D     x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt select id  select-meal-type  multiple  multiple  gt  x000D     lt option value  1  gt Breakfast lt  option gt  x000D     lt option value  2  gt Lunch lt  option gt  x000D     lt option value  3  gt Dinner lt  option gt  x000D     lt option value  4  gt Snacks lt  option gt  x000D     lt option value  5  gt Dessert lt  option gt  x000D   lt  select gt  x000D   x000D   x000D    fiddle

User · Answer

select-meal-type  selected   will contain an array of all of the selected items       select-meal-type option selected   each function         alert   this  val

User · Answer

Something like the following would be my choice   let selectElement   document getElementById  categorySelect    let selectedOptions   selectedElement selectedOptions       filter call selectedElement options  option   gt  option selected   let selectedValues      map call selectedOptions  option   gt  option value     It s short  it s fast on modern browsers  and we don t care whether it s fast or not on 1  market share browsers   Note  selectedOptions has wonky behavior on some browsers from around 5 years ago  so a user agent sniff isn t totally out of line here

[javascript] How to get all selected values from <select multiple=multiple>?

Examples related to javascript

Examples related to jquery

Examples related to html