What is the best way to add options to a select from a JavaScript object with jQuery

Question

What is the best method for adding options to a  lt select gt  from a JavaScript object using jQuery   I m looking for something that I don t need a plugin to do  but I would also be interested in the plugins that are out there   This is what I did   selectValues      1    test 1    2    test 2      for  key in selectValues      if  typeof  selectValues key      string             mySelect   append   lt option value      key      gt     selectValues key      lt  option gt             A clean simple solution   This is a cleaned up and simplified version of matdumsa s     each selectValues  function key  value             mySelect              append     lt option gt      value   key               text value          Changes from matdumsa s   1  removed the close tag for the option inside append   and  2  moved the properties attributes into an map as the second parameter of append

User · Answer

I combine the two best answers into a great answer   var outputConcatenation          each selectValues  function i  item            outputConcatenation push     lt option gt  lt  option gt    attr  value   item key  attr  data-customdata   item customdata  text item text  prop  outerHTML              myselect   html outputConcatenation join

User · Answer

Since JQuery s append can take an array as an argument  I m surprised nobody suggested making this a one-liner with map      the select   append   a   b   c   map x   gt      lt option gt    text x       or reduce    a   b   c   reduce  s x    gt  s append     lt option gt    text x        the select

User · Answer

A jQuery plugin could be found here  Auto-populating Select Boxes using jQuery  amp  AJAX

User · Answer

function populateDropdown select  data           select html               each data  function id  option               select append     lt option gt  lt  option gt    val option value  html option name                                It works well with jQuery 1 4 1   For complete article for using dynamic lists with ASP NET MVC  amp  jQuery visit   Dynamic Select Lists with MVC and jQuery

User · Answer

Yet another way of doing it   var options             each selectValues  function key  value        options push     lt option  gt              value  key          text  value                  mySelect   append options

User · Answer

You can just iterate over your json array with the following code      lt option  gt    attr  value   someValue   text  Option1   appendTo   my-select-id

User · Answer

This looks nicer  provides readability  but is slower than other methods     each selectData  function i  option            lt option  gt    val option id  text option title  appendTo   selectBox          If you want speed  the fastest  tested   way is this  using array  not string concatenation  and using only one append call   auxArr         each selectData  function i  option        auxArr i      lt option value      option id      gt     option title     lt  option gt             selectBox   append auxArr join

User · Answer

Set your HTML select id into following line below  In here mySelect is used as the id of the select element        var options       mySelect      then get the object which is the selectValues in this scenario and sets it to the jquery for each loop  It will use the value and text of the objects accordingly and appends it into the option selections as follows      each selectValues  function val  text                options append                   lt option gt  lt  option gt    val val  html text                           This will display text as the option list when drop down list is selected and once a text is selected value of the selected text will be used    Eg    1    test 1     2    test 2    Dropdown   display name  test 1 -  value is 1 display name  test 2 -  value is 2

User · Answer

The JSON format           org name    Asset Management            org name    Debt Equity Foreign services            org name    Credit Services       And the jQuery code to populate the values to the Dropdown on Ajax success   success  function json        var options               org category   html          Set the Dropdown as Blank before new Data     options push   lt option gt -- Select Category -- lt  option gt           each JSON parse json   function i  item            options push     lt option  gt                         value  item org name  text  item org name                              org category   append options       Set the Values to Dropdown

User · Answer

Most of the other answers use the each function to iterate over the selectValues  This requires that append be called into for each element and a reflow gets triggered when each is added individually   Updating this answer to a more idiomatic functional method  using modern JS  can be formed to call append only once  with an array of option elements created using map and an Option element constructor   Using an Option DOM element should reduce function call overhead as the option element doesn t need to be updated after creation and jQuery s parsing logic need not run      mySelect   append   map selectValues   k  v    gt  new Option k  v      This can be simplified further if you make a factory utility function that will new up an option object   const newoption       args    gt  new Option    args    Then this can be provided directly to map      mySelect   append   map selectValues  newoption     Previous Formulation  Because append also allows passing values as a variable number of arguments  we can precreate the list of option elements map and append them as arguments in a single call by using apply     fn append apply    mySelect      map selectValues   k  v    gt      lt option  gt    val k  text v       It looks like that in later versions of jQuery  append also accepts an array argument and this can be simplified somewhat      mySelect   append   map selectValues   k  v    gt      lt option  gt    val k  text v

User · Answer

The same as other answers  in a jQuery fashion     each selectValues  function key  value                mySelect             append     lt option gt  lt  option gt                         attr  value   key                       text value

User · Answer

each is slower than a for loop Each time  a DOM selection is not the best practice in loop     mySelect   append      So the best solution is the following  If JSON data resp is          id   0001    name   Mr  P          id   0003    name   Mr  Q          id   0054    name   Mr  R          id   0061    name   Mr  S       use it as  var option       for  i 0  i lt resp length  i          option      lt option value      resp i  id      gt     resp i  name     lt  option gt          mySelect   html option

User · Answer

Actually  for getting the improved performance  it s better to make option list separately and append to select id    var options         each selectValues  function key  value        options push      lt option gt      value   key               text value             mySelect   append options     http   learn jquery com performance append-outside-loop

User · Answer

Be forwarned    I am using jQuery Mobile 1 0b2 with PhoneGap 1 0 0 on an Android 2 2  Cyanogen 7 0 1  phone  T-Mobile G2  and could not get the  append   method to work at all   I had to use  html   like follows   var options    each data  function index  object        options      lt option value      object id      gt     object stop     lt  option gt             selectMenu   html options

User · Answer

Actually  for getting the improved performance  it s better to make option list separately and append to select id    var options         each selectValues  function key  value        options push      lt option gt      value   key               text value             mySelect   append options     http   learn jquery com performance append-outside-loop

User · Answer

I decided to chime in a bit    Deal with prior selected option  some browsers mess up when we append ONLY hit DOM once with the append Deal with multiple property while adding more options Show how to use an object Show how to map using an array of objects    x000D   x000D     objects as value desc x000D  let selectValues     x000D     1    test 1   x000D     2    test 2   x000D     3    test 3   x000D     4    test Four  x000D     x000D    use div here as using  select  mucks up the original selected value in  mySelect  x000D  let opts       lt div   gt     x000D  let opt       x000D    each selectValues  function value  desc    x000D    opts append     lt option   gt    prop  value   value  text desc    x000D      x000D  opts find  option   appendTo   mySelect    x000D   x000D     array of objects called  options  in an object x000D  let selectValuesNew     x000D    options     x000D        value   1   x000D        description   2test 1  x000D         x000D        x000D        value   2   x000D        description   2test 2   x000D        selected  true x000D         x000D        x000D        value   3   x000D        description   2test 3  x000D         x000D        x000D        value   4   x000D        description   2test Four  x000D        x000D      x000D     x000D   x000D    use div here as using  select  mucks up the original selected value x000D  let opts2       lt div   gt     x000D  let opt2         only append after adding all options x000D    map selectValuesNew options  function val  index    x000D    opts2 append     lt option   gt    x000D       prop  value   val value  x000D       prop  selected   val selected  x000D       text val description    x000D      x000D  opts2 find  option   appendTo   mySelectNew    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   lt select id  mySelect  gt  x000D     lt option value    selected  selected  gt empty lt  option gt  x000D   lt  select gt  x000D   x000D   lt select id  mySelectNew  multiple  multiple  gt  x000D     lt option value    selected  selected  gt 2empty lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

The simple way is       SelectId   html   lt option value  0  gt select lt  option gt  lt option value  1  gt Laguna lt  option gt

User · Answer

If you don t have to support old IE versions  using the Option constructor is clearly the way to go  a readable and efficient solution     new Option  myText    val    appendTo   mySelect      It s equivalent in functionality to  but cleaner than       lt option gt  lt  option gt    attr  value    val   text  myText    appendTo   mySelect

User · Answer

I have made something like this  loading a dropdown item via Ajax  The response above is also acceptable  but it is always good to have as little DOM modification as as possible for better performance   So rather than add each item inside a loop it is better to collect items within a loop and append it once it s completed     data  each function            Collect items      Append it       select id   append items      or even better       select id   html items

User · Answer

The JSON format           org name    Asset Management            org name    Debt Equity Foreign services            org name    Credit Services       And the jQuery code to populate the values to the Dropdown on Ajax success   success  function json        var options               org category   html          Set the Dropdown as Blank before new Data     options push   lt option gt -- Select Category -- lt  option gt           each JSON parse json   function i  item            options push     lt option  gt                         value  item org name  text  item org name                              org category   append options       Set the Values to Dropdown

User · Answer

Pure JS In pure JS adding next option to select is easier and more direct mySelect innerHTML     lt option value  quot   key  quot  gt   value  lt  option gt      x000D   x000D  let selectValues      1    test 1    2    test 2      for let key in selectValues       mySelect innerHTML     lt option value    key   gt   selectValues key   lt  option gt      x000D   lt select id  mySelect  gt     lt option value  0  selected  selected  gt test 0 lt  option gt   lt  select gt  x000D   x000D   x000D

User · Answer

All of these answers seem unnecessarily complicated   All you need is   var options       mySelect   get 0  options    each selectValues  function key  value            options options length    new Option value  key         That is completely cross browser compatible

User · Answer

A refinement of older  joshperry s answer   It seems that plain  append also works as expected       mySelect   append      map selectValues  function v k        return     lt option gt    val k  text v             or shorter       mySelect   append      map selectValues   v k    gt      lt option gt    val k  text v          map selectValues   v k    gt  new Option v  k      using plain JS

User · Answer

This is slightly faster and cleaner    x000D   x000D  var selectValues     x000D     1    test 1   x000D     2    test 2  x000D     x000D  var  mySelect       mySelect    x000D     x000D    each selectValues  function key  value    x000D    var  option       lt option  gt      x000D      value  key  x000D      text  value x000D        x000D     mySelect append  option   x000D      x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   lt select id  mySelect  gt  lt  select gt  x000D   x000D   x000D

User · Answer

There s a sorting problem with this solution in Chrome  jQuery 1 7 1   Chrome sorts object properties by name number   So to keep the order  yes  it s object abusing   I changed this   optionValues0     4321    option 1    1234    option 2      to this  optionValues0     1    id   4321   value   option 1     2    id   1234   value   option 2       and then the   each will look like     each optionValues0  function order  object      key   object id    value   object value        mySelect   append     lt option gt      value   key    text value

User · Answer

Although the previous answers are all valid answers - it might be advisable to append all these to a documentFragmnet first  then append that document fragment as an element after     See John Resig s thoughts on the matter     Something along the lines of   var frag   document createDocumentFragment     for item in data Events        var option   document createElement  option         option setAttribute  value   data Events item  Key       option innerText   data Events item  Value       frag appendChild option     eventDrop empty    eventDrop append frag

User · Answer

If you don t have to support old IE versions  using the Option constructor is clearly the way to go  a readable and efficient solution     new Option  myText    val    appendTo   mySelect      It s equivalent in functionality to  but cleaner than       lt option gt  lt  option gt    attr  value    val   text  myText    appendTo   mySelect

User · Answer

Getting the object keys to get the object values  Using map   to add new Options    x000D   x000D  const selectValues     x000D     1    test 1   x000D     2    test 2  x000D    x000D  const selectTest   document getElementById  selectTest   x000D  Object keys selectValues  map key   gt  selectTest add new Option selectValues key   key    x000D   lt select id  selectTest  gt  lt  select gt  x000D   x000D   x000D

User · Answer

lt  DOCTYPE html gt   lt html lang  en  gt   lt head gt     lt title gt append selectbox using jquery lt  title gt     lt meta charset  utf-8  gt     lt script src  https   ajax googleapis com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt      lt script type  text javascript  gt      function setprice            var selectValues      1    test 1    2    test 2               each selectValues  function key  value                mySelect             append     lt option gt  lt  option gt                         attr  value  key                       text value                   lt  script gt   lt  head gt   lt body onload  setprice     gt           lt select class  form-control  id  mySelect  gt       lt option gt 1 lt  option gt       lt option gt 2 lt  option gt       lt option gt 3 lt  option gt       lt option gt 4 lt  option gt     lt  select gt     lt  body gt   lt  html gt

User · Answer

Set your HTML select id into following line below  In here mySelect is used as the id of the select element        var options       mySelect      then get the object which is the selectValues in this scenario and sets it to the jquery for each loop  It will use the value and text of the objects accordingly and appends it into the option selections as follows      each selectValues  function val  text                options append                   lt option gt  lt  option gt    val val  html text                           This will display text as the option list when drop down list is selected and once a text is selected value of the selected text will be used    Eg    1    test 1     2    test 2    Dropdown   display name  test 1 -  value is 1 display name  test 2 -  value is 2

User · Answer

If you don t have to support old IE versions  using the Option constructor is clearly the way to go  a readable and efficient solution     new Option  myText    val    appendTo   mySelect      It s equivalent in functionality to  but cleaner than       lt option gt  lt  option gt    attr  value    val   text  myText    appendTo   mySelect

User · Answer

There s a sorting problem with this solution in Chrome  jQuery 1 7 1   Chrome sorts object properties by name number   So to keep the order  yes  it s object abusing   I changed this   optionValues0     4321    option 1    1234    option 2      to this  optionValues0     1    id   4321   value   option 1     2    id   1234   value   option 2       and then the   each will look like     each optionValues0  function order  object      key   object id    value   object value        mySelect   append     lt option gt      value   key    text value

User · Answer

I combine the two best answers into a great answer   var outputConcatenation          each selectValues  function i  item            outputConcatenation push     lt option gt  lt  option gt    attr  value   item key  attr  data-customdata   item customdata  text item text  prop  outerHTML              myselect   html outputConcatenation join

User · Answer

If you don t have to support old IE versions  using the Option constructor is clearly the way to go  a readable and efficient solution     new Option  myText    val    appendTo   mySelect      It s equivalent in functionality to  but cleaner than       lt option gt  lt  option gt    attr  value    val   text  myText    appendTo   mySelect

User · Answer

Since JQuery s append can take an array as an argument  I m surprised nobody suggested making this a one-liner with map      the select   append   a   b   c   map x   gt      lt option gt    text x       or reduce    a   b   c   reduce  s x    gt  s append     lt option gt    text x        the select

User · Answer

each selectValues  function key  value            mySelect   append     lt option  gt              value  key  text  value

User · Answer

var output        var length   data length   for var i   0  i  lt  length  i           output i        lt option value      data i  start      gt     data i  start     lt  option gt             choose schedule   get 0  innerHTML   output join        I ve done a few tests and this  I believe  does the job the fastest   P

User · Answer

Yet another way of doing it   var options             each selectValues  function key  value        options push     lt option  gt              value  key          text  value                  mySelect   append options

User · Answer

Although the previous answers are all valid answers - it might be advisable to append all these to a documentFragmnet first  then append that document fragment as an element after     See John Resig s thoughts on the matter     Something along the lines of   var frag   document createDocumentFragment     for item in data Events        var option   document createElement  option         option setAttribute  value   data Events item  Key       option innerText   data Events item  Value       frag appendChild option     eventDrop empty    eventDrop append frag

User · Answer

var output          each selectValues  function key  value      output push   lt option value     key     gt    value    lt  option gt              mySelect   html output join         In this way you  touch the DOM  only one time     I m not sure if the latest line can be converted into     mySelect   html output join      because I don t know jQuery internals  maybe it does some parsing in the html   method

User · Answer

function populateDropdown select  data           select html               each data  function id  option               select append     lt option gt  lt  option gt    val option value  html option name                                It works well with jQuery 1 4 1   For complete article for using dynamic lists with ASP NET MVC  amp  jQuery visit   Dynamic Select Lists with MVC and jQuery

User · Answer

I have made something like this  loading a dropdown item via Ajax  The response above is also acceptable  but it is always good to have as little DOM modification as as possible for better performance   So rather than add each item inside a loop it is better to collect items within a loop and append it once it s completed     data  each function            Collect items      Append it       select id   append items      or even better       select id   html items

User · Answer

All of these answers seem unnecessarily complicated   All you need is   var options       mySelect   get 0  options    each selectValues  function key  value            options options length    new Option value  key         That is completely cross browser compatible

User · Answer

A refinement of older  joshperry s answer   It seems that plain  append also works as expected       mySelect   append      map selectValues  function v k        return     lt option gt    val k  text v             or shorter       mySelect   append      map selectValues   v k    gt      lt option gt    val k  text v          map selectValues   v k    gt  new Option v  k      using plain JS

User · Answer

The simple way is       SelectId   html   lt option value  0  gt select lt  option gt  lt option value  1  gt Laguna lt  option gt

User · Answer

var output          each selectValues  function key  value      output push   lt option value     key     gt    value    lt  option gt              mySelect   html output join         In this way you  touch the DOM  only one time     I m not sure if the latest line can be converted into     mySelect   html output join      because I don t know jQuery internals  maybe it does some parsing in the html   method

User · Answer

I decided to chime in a bit    Deal with prior selected option  some browsers mess up when we append ONLY hit DOM once with the append Deal with multiple property while adding more options Show how to use an object Show how to map using an array of objects    x000D   x000D     objects as value desc x000D  let selectValues     x000D     1    test 1   x000D     2    test 2   x000D     3    test 3   x000D     4    test Four  x000D     x000D    use div here as using  select  mucks up the original selected value in  mySelect  x000D  let opts       lt div   gt     x000D  let opt       x000D    each selectValues  function value  desc    x000D    opts append     lt option   gt    prop  value   value  text desc    x000D      x000D  opts find  option   appendTo   mySelect    x000D   x000D     array of objects called  options  in an object x000D  let selectValuesNew     x000D    options     x000D        value   1   x000D        description   2test 1  x000D         x000D        x000D        value   2   x000D        description   2test 2   x000D        selected  true x000D         x000D        x000D        value   3   x000D        description   2test 3  x000D         x000D        x000D        value   4   x000D        description   2test Four  x000D        x000D      x000D     x000D   x000D    use div here as using  select  mucks up the original selected value x000D  let opts2       lt div   gt     x000D  let opt2         only append after adding all options x000D    map selectValuesNew options  function val  index    x000D    opts2 append     lt option   gt    x000D       prop  value   val value  x000D       prop  selected   val selected  x000D       text val description    x000D      x000D  opts2 find  option   appendTo   mySelectNew    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   lt select id  mySelect  gt  x000D     lt option value    selected  selected  gt empty lt  option gt  x000D   lt  select gt  x000D   x000D   lt select id  mySelectNew  multiple  multiple  gt  x000D     lt option value    selected  selected  gt 2empty lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

I have made something like this  loading a dropdown item via Ajax  The response above is also acceptable  but it is always good to have as little DOM modification as as possible for better performance   So rather than add each item inside a loop it is better to collect items within a loop and append it once it s completed     data  each function            Collect items      Append it       select id   append items      or even better       select id   html items

User · Answer

A jQuery plugin could be found here  Auto-populating Select Boxes using jQuery  amp  AJAX

User · Answer

Getting the object keys to get the object values  Using map   to add new Options    x000D   x000D  const selectValues     x000D     1    test 1   x000D     2    test 2  x000D    x000D  const selectTest   document getElementById  selectTest   x000D  Object keys selectValues  map key   gt  selectTest add new Option selectValues key   key    x000D   lt select id  selectTest  gt  lt  select gt  x000D   x000D   x000D

User · Answer

The same as other answers  in a jQuery fashion     each selectValues  function key  value                mySelect             append     lt option gt  lt  option gt                         attr  value   key                       text value

User · Answer

each selectValues  function key  value            mySelect   append     lt option  gt              value  key  text  value

User · Answer

each is slower than a for loop Each time  a DOM selection is not the best practice in loop     mySelect   append      So the best solution is the following  If JSON data resp is          id   0001    name   Mr  P          id   0003    name   Mr  Q          id   0054    name   Mr  R          id   0061    name   Mr  S       use it as  var option       for  i 0  i lt resp length  i          option      lt option value      resp i  id      gt     resp i  name     lt  option gt          mySelect   html option

User · Answer

That s what I did with two-dimensional arrays  The first column is item i  add to innerHTML of the  lt option gt   The second column is record id i  add to the value of the  lt option gt     PHP   items    dal- gt get new items       Gets data from the database  items arr   array     i   0  foreach   items as  item         first name    item- gt first name       last name    item- gt last name       date    item- gt date       show    first name          last name           date       request id    request- gt request id       items arr 0   i     show       items arr 1   i     request id       i       echo json encode  items arr    JavaScript Ajax          function ddl items                 if  window XMLHttpRequest                       Code for Internet Explorer 7   Firefox  Chrome  Opera  and Safari                 xmlhttp new XMLHttpRequest                              else                     Code for Internet Explorer 6 and Internet Explorer 5                 xmlhttp new ActiveXObject  Microsoft XMLHTTP                               xmlhttp onreadystatechange function                 if  xmlhttp readyState  4  amp  amp  xmlhttp status  200                    var arr   JSON parse xmlhttp responseText                   var lstbx   document getElementById  my listbox                     for  var i 0  i lt arr length  i                          var option   new Option arr 0  i   arr 1  i                        lstbx options add option                                                       xmlhttp open  GET    Code get items php dummy time     new Date   getTime         true           xmlhttp send

User · Answer

Pure JS In pure JS adding next option to select is easier and more direct mySelect innerHTML     lt option value  quot   key  quot  gt   value  lt  option gt      x000D   x000D  let selectValues      1    test 1    2    test 2      for let key in selectValues       mySelect innerHTML     lt option value    key   gt   selectValues key   lt  option gt      x000D   lt select id  mySelect  gt     lt option value  0  selected  selected  gt test 0 lt  option gt   lt  select gt  x000D   x000D   x000D

User · Answer

if  data length    0        var opts           for  i in data          opts      lt option value    data i  value     gt   data i  text    lt  option gt             myselect   empty   append opts       This manipulates the DOM only once after first building a giant string

User · Answer

The same as other answers  in a jQuery fashion     each selectValues  function key  value                mySelect             append     lt option gt  lt  option gt                         attr  value   key                       text value

User · Answer

I found that this is simple and works great       for  var i   0  i  lt  array length  i              clientsList   append     lt option gt  lt  option gt    text array i  ClientName  val array i  ID

User · Answer

I have made something like this  loading a dropdown item via Ajax  The response above is also acceptable  but it is always good to have as little DOM modification as as possible for better performance   So rather than add each item inside a loop it is better to collect items within a loop and append it once it s completed     data  each function            Collect items      Append it       select id   append items      or even better       select id   html items

User · Answer

That s what I did with two-dimensional arrays  The first column is item i  add to innerHTML of the  lt option gt   The second column is record id i  add to the value of the  lt option gt     PHP   items    dal- gt get new items       Gets data from the database  items arr   array     i   0  foreach   items as  item         first name    item- gt first name       last name    item- gt last name       date    item- gt date       show    first name          last name           date       request id    request- gt request id       items arr 0   i     show       items arr 1   i     request id       i       echo json encode  items arr    JavaScript Ajax          function ddl items                 if  window XMLHttpRequest                       Code for Internet Explorer 7   Firefox  Chrome  Opera  and Safari                 xmlhttp new XMLHttpRequest                              else                     Code for Internet Explorer 6 and Internet Explorer 5                 xmlhttp new ActiveXObject  Microsoft XMLHTTP                               xmlhttp onreadystatechange function                 if  xmlhttp readyState  4  amp  amp  xmlhttp status  200                    var arr   JSON parse xmlhttp responseText                   var lstbx   document getElementById  my listbox                     for  var i 0  i lt arr length  i                          var option   new Option arr 0  i   arr 1  i                        lstbx options add option                                                       xmlhttp open  GET    Code get items php dummy time     new Date   getTime         true           xmlhttp send

User · Answer

Most of the other answers use the each function to iterate over the selectValues  This requires that append be called into for each element and a reflow gets triggered when each is added individually   Updating this answer to a more idiomatic functional method  using modern JS  can be formed to call append only once  with an array of option elements created using map and an Option element constructor   Using an Option DOM element should reduce function call overhead as the option element doesn t need to be updated after creation and jQuery s parsing logic need not run      mySelect   append   map selectValues   k  v    gt  new Option k  v      This can be simplified further if you make a factory utility function that will new up an option object   const newoption       args    gt  new Option    args    Then this can be provided directly to map      mySelect   append   map selectValues  newoption     Previous Formulation  Because append also allows passing values as a variable number of arguments  we can precreate the list of option elements map and append them as arguments in a single call by using apply     fn append apply    mySelect      map selectValues   k  v    gt      lt option  gt    val k  text v       It looks like that in later versions of jQuery  append also accepts an array argument and this can be simplified somewhat      mySelect   append   map selectValues   k  v    gt      lt option  gt    val k  text v

User · Answer

jQuery  var list       selectList      each items  function index  item      list append new Option item text  item value          Vanilla JavaScript  var list   document getElementById  selectList    for var i in items      list add new Option items i  text  items i  value

User · Answer

Using the   map   function  you can do this in a more elegant way       mySelect   html    map selectValues  function val  key       return   lt option value      val      gt    key     lt  option gt       join

User · Answer

Rather than repeating the same code everywhere  I would suggest it is more desirable to write your own jQuery function like   jQuery fn addOption   function  key  value          this  append     lt option gt      value  key    text value         Then to add an option just do the following      select   addOption  0    None

User · Answer

Rather than repeating the same code everywhere  I would suggest it is more desirable to write your own jQuery function like   jQuery fn addOption   function  key  value          this  append     lt option gt      value  key    text value         Then to add an option just do the following      select   addOption  0    None

User · Answer

lt  DOCTYPE html gt   lt html lang  en  gt   lt head gt     lt title gt append selectbox using jquery lt  title gt     lt meta charset  utf-8  gt     lt script src  https   ajax googleapis com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt      lt script type  text javascript  gt      function setprice            var selectValues      1    test 1    2    test 2               each selectValues  function key  value                mySelect             append     lt option gt  lt  option gt                         attr  value  key                       text value                   lt  script gt   lt  head gt   lt body onload  setprice     gt           lt select class  form-control  id  mySelect  gt       lt option gt 1 lt  option gt       lt option gt 2 lt  option gt       lt option gt 3 lt  option gt       lt option gt 4 lt  option gt     lt  select gt     lt  body gt   lt  html gt

User · Answer

This is slightly faster and cleaner    x000D   x000D  var selectValues     x000D     1    test 1   x000D     2    test 2  x000D     x000D  var  mySelect       mySelect    x000D     x000D    each selectValues  function key  value    x000D    var  option       lt option  gt      x000D      value  key  x000D      text  value x000D        x000D     mySelect append  option   x000D      x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   lt select id  mySelect  gt  lt  select gt  x000D   x000D   x000D

User · Answer

jQuery  var list       selectList      each items  function index  item      list append new Option item text  item value          Vanilla JavaScript  var list   document getElementById  selectList    for var i in items      list add new Option items i  text  items i  value

User · Answer

var output        var length   data length   for var i   0  i  lt  length  i           output i        lt option value      data i  start      gt     data i  start     lt  option gt             choose schedule   get 0  innerHTML   output join        I ve done a few tests and this  I believe  does the job the fastest   P

User · Answer

The same as other answers  in a jQuery fashion     each selectValues  function key  value                mySelect             append     lt option gt  lt  option gt                         attr  value   key                       text value

User · Answer

Using the   map   function  you can do this in a more elegant way       mySelect   html    map selectValues  function val  key       return   lt option value      val      gt    key     lt  option gt       join

User · Answer

Be forwarned    I am using jQuery Mobile 1 0b2 with PhoneGap 1 0 0 on an Android 2 2  Cyanogen 7 0 1  phone  T-Mobile G2  and could not get the  append   method to work at all   I had to use  html   like follows   var options    each data  function index  object        options      lt option value      object id      gt     object stop     lt  option gt             selectMenu   html options

User · Answer

There s an approach using the Microsoft Templating approach that s currently under proposal for inclusion into jQuery core  There s more power in using the templating so for the simplest scenario it may not be the best option  For more details see Scott Gu s post outlining the features   First include the templating js file  available from github    lt script src  Scripts jquery tmpl js  type  text javascript    gt    Next set-up a template   lt script id  templateOptionItem  type  text html  gt       lt option value       Value     gt     Text   lt  option gt   lt  script gt    Then with your data call the  render   method  var someData           Text   one   Value   1           Text   two   Value   2           Text   three   Value   3          templateOptionItem   render someData  appendTo   mySelect      I ve blogged this approach in more detail

User · Answer

if  data length    0        var opts           for  i in data          opts      lt option value    data i  value     gt   data i  text    lt  option gt             myselect   empty   append opts       This manipulates the DOM only once after first building a giant string

User · Answer

This looks nicer  provides readability  but is slower than other methods     each selectData  function i  option            lt option  gt    val option id  text option title  appendTo   selectBox          If you want speed  the fastest  tested   way is this  using array  not string concatenation  and using only one append call   auxArr         each selectData  function i  option        auxArr i      lt option value      option id      gt     option title     lt  option gt             selectBox   append auxArr join

User · Answer

There s an approach using the Microsoft Templating approach that s currently under proposal for inclusion into jQuery core  There s more power in using the templating so for the simplest scenario it may not be the best option  For more details see Scott Gu s post outlining the features   First include the templating js file  available from github    lt script src  Scripts jquery tmpl js  type  text javascript    gt    Next set-up a template   lt script id  templateOptionItem  type  text html  gt       lt option value       Value     gt     Text   lt  option gt   lt  script gt    Then with your data call the  render   method  var someData           Text   one   Value   1           Text   two   Value   2           Text   three   Value   3          templateOptionItem   render someData  appendTo   mySelect      I ve blogged this approach in more detail

User · Answer

You can just iterate over your json array with the following code      lt option  gt    attr  value   someValue   text  Option1   appendTo   my-select-id

User · Answer

I found that this is simple and works great       for  var i   0  i  lt  array length  i              clientsList   append     lt option gt  lt  option gt    text array i  ClientName  val array i  ID

[javascript] What is the best way to add options to a select from a JavaScript object with jQuery?

Examples related to javascript

Examples related to jquery

Examples related to html-select