How to get all selected values of a multiple select box

Question

I have a  lt select gt  element with the multiple attribute  How can I get this element s selected values using JavaScript    Here s what I m trying   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 lt selObj options length  i               if  selObj options i  selected                selectedArray count    selObj options i  value              count                           txtSelectedValuesObj value   selectedArray

User · Answer

Building on Rick Viscomi s answer  try using the HTML Select Element s selectedOptions property   let txtSelectedValuesObj   document getElementById  txtSelectedValues        txtSelectedValuesObj selectedOptions  map option   gt  option value     In detail    selectedOptions returns a list of selected items  Specifically  it returns a read-only HTMLCollection containing HTMLOptionElements      is spread syntax  It expands the HTMLCollection s elements        creates a mutable Array object from these elements  giving you an array of HTMLOptionElements  map   replaces each HTMLObjectElement in the array  here called option  with its value  option value     Dense  but it seems to work   Watch out  selectedOptions isn t supported by IE

User · Answer

Riot js code  this GetOpt     gt    let opt this refs ni   this logger debug  Options length   opt options length    for let i 0 i lt  opt options length i        if opt options i  selected  true      this logger debug opt options i  value             ni   is a name of HTML select option element as follows     HTML code    lt select multiple ref  ni  gt     lt option value    gt ---Select--- lt  option gt     lt option value  Option1   gt Gaming lt  option gt     lt option value  Option2  gt Photoshoot lt  option gt   lt  select gt

User · Answer

suppose the multiSelect is the Multiple-Select-Element  just use its selectedOptions Property     show all selected options in the console   for   var i   0  i  lt  multiSelect selectedOptions length  i        console log  multiSelect selectedOptions i  value

User · Answer

You Can try this script        lt  DOCTYPE html gt       lt html gt       lt script gt      function getMultipleSelectedValue               var x document getElementById  alpha          for  var i   0  i  lt  x options length  i               if x options i  selected   true                 alert x options i  value                                  lt  script gt       lt  head gt       lt body gt       lt select multiple  multiple  id  alpha  gt         lt option value  a  gt A lt  option gt         lt option value  b  gt B lt  option gt         lt option value  c  gt C lt  option gt         lt option value  d  gt D lt  option gt       lt  select gt       lt input type  button  value  Submit  onclick  getMultipleSelectedValue     gt       lt  body gt       lt  html gt

User · Answer

Check this   HTML    lt select id  test  multiple gt   lt option value  red  selected gt Red lt  option gt   lt option value  rock  selected gt Rock lt  option gt   lt option value  sun  gt Sun lt  option gt   lt  select gt    Javascript one line code  Array from document getElementById  test   options  filter option   gt  option selected  map option   gt  option value

User · Answer

Same as the earlier answer but using underscore js   function getSelectValues select        return   map   filter select options  function opt             return opt selected      function opt                 return opt value    opt text

User · Answer

You may use jquery plugin chosen     lt head gt    lt link rel  stylesheet  href    cdnjs cloudflare com ajax libs chosen 1 4 2 chosen min css    lt script src    code jquery com jquery-1 11 3 min js  gt  lt  script gt    lt script src    cdnjs cloudflare com ajax libs chosen 1 4 2 chosen jquery min js  gt  lt  script gt    lt script gt          jQuery document  ready function                jQuery   chosen   data  placeholder   Select Frameworks      chosen                  lt  script gt   lt  head gt     lt body gt       lt label for  Test  class  col-md-3 control label  gt Test lt  label gt         lt select class  chosen  style  width 350px  multiple  true  gt               lt option gt Choose    lt  option gt               lt option gt Java lt  option gt                                          lt option gt C   lt  option gt               lt option gt Python lt  option gt        lt  select gt    lt  body gt

User · Answer

Here is an ES6 implementation   value   Array    el options  reduce  acc  option    gt      if  option selected     true        acc push option value         return acc

User · Answer

You can use    reduce for a more compact implementation of RobG s approach   var getSelectedValues    function selectElement      return    reduce call selectElement options  function result  option        if  option selected  result push option value       return result

User · Answer

Pretty much the same as already suggested but a bit different  About as much code as jQuery in Vanilla JS   selected   Array prototype filter apply    select options        function o          return o selected                 It seems to be faster than a loop in IE  FF and Safari  I find it interesting that it s slower in Chrome and Opera   Another approach would be using selectors   selected   Array prototype map apply      select querySelectorAll  option selected  selected           function  o    return o value

User · Answer

My template helper looks like this     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   gt  o text      to filter your bits  text  value or selected       do stuff

User · Answer

Check-it Out   HTML    lt a id  aSelect  href     gt Select lt  a gt   lt br   gt   lt asp ListBox ID  lstSelect  runat  server   SelectionMode  Multiple  Width  100px  gt       lt asp ListItem Text  Raj  Value  1  gt  lt  asp ListItem gt       lt asp ListItem Text  Karan  Value  2  gt  lt  asp ListItem gt       lt asp ListItem Text  Riya  Value  3  gt  lt  asp ListItem gt       lt asp ListItem Text  Aman  Value  4  gt  lt  asp ListItem gt       lt asp ListItem Text  Tom  Value  5  gt  lt  asp ListItem gt   lt  asp ListBox gt    JQUERY       aSelect   click function        var selectedValues                   lstSelect  selected   each function            selectedValues push   this  val                  alert selectedValues       return false        CLICK HERE TO SEE THE DEMO

User · Answer

ES6      select options  filter option   gt  option selected  map option   gt  option value    Where select is a reference to the  lt select gt  element   To break it down        select options  takes the Array-like list of options and destructures it so that we can use Array prototype methods on it  Edit  also consider using Array from    filter      reduces the options to only the ones that are selected map      converts the raw  lt option gt  elements into their respective values

User · Answer

No jQuery      Return an array of the selected opion values    select is an HTML select element 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      Quick example    lt select multiple gt     lt option gt opt 1 text    lt option value  opt 2 value  gt opt 2 text  lt  select gt   lt button onclick     var el   document getElementsByTagName  select   0     alert getSelectValues el      gt Show selected values lt  button gt

User · Answer

Here ya go   const arr   Array from el features selectedOptions    get array from selectedOptions property const list       arr forEach item   gt  list push item value     push each item to empty array console log list

[javascript] How to get all selected values of a multiple select box?

Examples related to javascript

Examples related to html

Examples related to drop-down-menu