How to get all options of a select using jQuery

Question

How can I get all the options of a select through jQuery by passing on its ID   I am only looking to get their values  not the text

User · Answer

This will put the option values of  myselectbox into a nice clean array for you     First  get the elements into a list var options       myselectbox option        Next  translate that into an array of just the values var values     map options  e   gt    e  val

User · Answer

id option   each function           this  prop  selected   true         Although  the CORRECT way is to set the DOM property of the element  like so       id option   each function          this  attr  selected   true

User · Answer

Use       id option   each function            Add   this  val   to your list        each     jQuery API Documentation

User · Answer

Here is a simple example in jquery to get all the values  texts  or value of the selected item  or text of the selected item      nCS1  gt  option   each  index  obj    gt       console log   obj  val           x000D   x000D  printOptionValues        gt    x000D   x000D        nCS1  gt  option   each  index  obj    gt    x000D      console log   obj  val     x000D       x000D   x000D    x000D   x000D  printOptionTexts        gt    x000D        nCS1  gt  option   each  index  obj    gt    x000D      console log   obj  text     x000D       x000D    x000D   x000D  printSelectedItemText        gt    x000D    console log     nCS1 option selected   text     x000D    x000D   x000D  printSelectedItemValue        gt    x000D    console log     nCS1 option selected   val     x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt select size  1  id  nCS1  name  nCS1  class  form-control   gt  x000D        lt option value  22  gt Australia lt  option gt  x000D             lt option value  23  gt Brunei lt  option gt  x000D             lt option value  33  gt Cambodia lt  option gt  x000D             lt option value  32  gt Canada lt  option gt  x000D             lt option value  27  gt Dubai lt  option gt  x000D             lt option value  28  gt Indonesia lt  option gt  x000D             lt option value  25  gt Malaysia lt  option gt      x000D   lt  select gt  x000D   lt br  gt  x000D   lt input type  button  onclick  printOptionValues    value  print option values    gt  x000D   lt br  gt  x000D   lt input type  button  onclick  printOptionTexts    value  print option texts    gt  x000D   lt br  gt  x000D   lt input type  button  onclick  printSelectedItemText    value  print selected option text   gt  x000D   lt br  gt  x000D   lt input type  button  onclick  printSelectedItemValue    value  print selected option value    gt  x000D   x000D   x000D

User · Answer

If you re looking for all options with some selected text then the below code will work       test   find  select option contains  B     filter   selected

User · Answer

This is a simple Script with jQuery     var items       IDSELECT  gt  option   map function         var opt           opt   this  val        this  text        return opt     get    var selectvalues        for var i   0  i  lt  items length  i          for key in items i               var id   key          var text   items i  key            item              item   id     id          item   text     text           selectvalues push item            console log selectvalues   copy selectvalues      lt select gt     lt option value  volvo  gt Volvo lt  option gt     lt option value  saab  gt Saab lt  option gt     lt option value  mercedes  gt Mercedes lt  option gt     lt option value  audi  gt Audi lt  option gt   lt  select gt

User · Answer

Some answers uses each  but map is a better alternative here IMHO      select example option   map function    return   this  val      get      There are  at least  two map functions in jQuery  Thomas Petersen s answer uses  Utilities jQuery map   this answer uses  Traversing map   and therefore a little cleaner code    It depends on what you are going to do with the values  If you  let s say  want to return the values from a function  map is probably the better alternative  But if you are going to use the values directly you probably want each

User · Answer

You can use following code for that   var assignedRoleId   new Array        RolesListAssigned option   each function        assignedRoleId push this value

User · Answer

The short way         gt        myselect option   each  index  data    gt        console log data attributes value value         or  export function GetSelectValues id    const mData   document getElementById id   let arry       for  let index   0  index  lt  mData children length  index          arry push mData children index  value     return arry

User · Answer

map is probably the most efficient way to do this   var options       selectBox option     var values     map options  function option        return option value        You can add change options to     selectBox option selected   if you only want the ones that are selected   The first line selects all of the checkboxes and puts their jQuery element into a variable  We then use the  map function of jQuery to apply a function to each of the elements of that variable  all we are doing is returning the value of each element as that is all we care about  Because we are returning them inside of the map function it actually builds an array of the values just as requested

User · Answer

I don t know jQuery  but I do know that if you get the select element  it contains an  options  object   var myOpts   document getElementById  yourselect   options  alert myOpts 0  value      gt  Value of the first option

User · Answer

var arr       option        select idunit   find  option   each function index    arr push     this  val     this  text        option     lt option      result 0  idunit  arr index  0    selected          value  quot   arr index  0    quot  gt   arr index  1    lt  option gt                    console log arr        select idunit   empty         select idunit   html option

User · Answer

select id   find  option   each function         alert   this  val

User · Answer

Working example  The most efficient way to do this is to use   map    Example   var values     map     selectBox option    function ele       return ele value

User · Answer

You can take all your  selected values  by the name of the checkboxes and present them in a sting separated by       A nice way to do this is to use jQuery s   map     var selected val     map    input name  d name   checked    function a                return a value         join        alert selected val

User · Answer

I found it short and simple  and can be tested in Dev Tool console itself       id option   each   index element   gt console log  index     index   value     element value   text       element text

User · Answer

For multiselect option       test   val   returns list of selected values      test option   length returns total number of options  both selected and not selected

User · Answer

input type checkbox  checked    serializeArray      Or       some class type checkbox  checked    serializeArray      To see the results   alert    input type checkbox  checked    serializeArray   toSource

[javascript] How to get all options of a select using jQuery?

Examples related to javascript

Examples related to jquery

Examples related to jquery-selectors