Adding options to a select using jQuery

Question

What s the easiest way to add an option to a dropdown using jQuery    Will this work       mySelect   append   lt option value 1 gt My option lt  option gt

User · Accepted Answer

This did NOT work in IE8  yet did in FF        selectList   append new Option  option text    value       This DID work   var o   new Option  option text    value        jquerify the DOM object  o  so we can use the html method   o  html  option text        selectList   append o

User · Answer

We found some problem when you append option and use jquery validate  You must click one item in select multiple list  You will add this code to handle       phonelist   append   lt option value      yournewvalue       gt     yournewvalue     lt  option gt          phonelist option selected   removeAttr  selected       add to remove lase selected      phonelist option value      yournewvalue         attr  selected   true     add new selected

User · Answer

Personally  I prefer this syntax for appending options       mySelect   append     lt option gt          value  1      text   My option         If you re adding options from a collection of items  you can do the following     each items  function  i  item            mySelect   append     lt option gt               value  item value          text   item text

User · Answer

This is just a quick points for best performance  always when you are dealing with many options  build a big string and then add it to the  select  for best performance  f g   var  mySelect       mySelect    var str          each items  function  i  item           IMPORTANT  no selectors inside the loop  for the best performance      str      lt option value      item value      gt      item text     lt  option gt           you built a big string   mySelect html str       lt -- here you add the big string with a lot of options into the selector   mySelect multiSelect  refresh      Even faster  var str        for var i  i   0  i  lt  arr length  i         str      lt option value      item i  value      gt      item i  text     lt  option gt           mySelect html str    mySelect multiSelect  refresh

User · Answer

That works well    If adding more than one option element  I d recommend performing the append once as opposed to performing an append on each element

User · Answer

mySelect   empty   append   lt option value 1 gt My option lt  option gt    selectmenu  refresh

User · Answer

You can do this in ES6     each json   i  val    gt            js-country-of-birth   append   lt option value    val country code   gt    val country   lt  option gt

User · Answer

for whatever reason doing     myselect   append new Option  text    text     isn t working for me in IE7   I had to use     myselect   html   lt option value  text  gt text lt  option gt

User · Answer

U can try below code to append to option      lt select id  mySelect  gt  lt  select gt        lt script gt                mySelect   append     lt option gt  lt  option gt    val  1   html  My enter code hereoption          lt  script gt

User · Answer

To help performance you should try to only alter the DOM once  even more so if you are adding many options    var html        for  var i   0  len   data length  i  lt  len    i        html join   lt option value      data i   value        gt     data i   label       lt  option gt                       select   append html

User · Answer

if u have optgroup inside select  u got error in DOM   I think a best way       select option last   after     lt option value  1  gt my option lt  option gt

User · Answer

If the option name or value is dynamic  you won t want to have to worry about escaping special characters in it  in this you might prefer simple DOM methods   var s  document getElementById  mySelect    s options s options length   new Option  My option    1

User · Answer

Why not simply      lt option  gt       val optionVal     text  some option      appendTo   mySelect

User · Answer

If you want to insert the new option at a specific index in the select       my select option   eq 2  before     lt option gt          value   New Item       text   New Item         This will insert the  New Item  as the 3rd item in the select

User · Answer

If someone comes here looking for a way to add options with data properties  Using attr  var option       lt option gt      value   the value   text   some text     attr  family   model family     Using data - version added 1 2 3  var option       lt option gt      value   the value   text   some text     data  misc    misc-value

User · Answer

Just by single line        each result  function  k v                               if k    selectedMonthNumber  var selectedMonth    selected   else var selectedMonth                                          periodMonth   append     lt option gt                                       value  k                                   text  v                                     selected  selectedMonth

User · Answer

Option 1-  You can try this-      selectID   append     lt option gt           value  value variable      text   text variable        Like this-   x000D   x000D  for  i   0  i  lt  10  i    x000D     x000D           mySelect   append     lt option gt    x000D         x000D          value  i  x000D          text    Option   i  x000D           x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   x000D   lt select id  mySelect  gt  lt  select gt  x000D   x000D   x000D    Option 2-  Or try this-      selectID   append    lt option value    value variable    gt   text variable   lt  option gt        Like this-   x000D   x000D  for  i   0  i  lt  10  i    x000D     x000D           mySelect   append    lt option value    i    gt    Option   i   lt  option gt      x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   x000D   lt select id  mySelect  gt  lt  select gt  x000D   x000D   x000D

User · Answer

Try mySelect innerHTML     lt option value 1 gt My option lt  option gt      x000D   x000D  btn onclick     gt  mySelect innerHTML     lt option selected gt    new Date  lt  option gt   x000D   lt button id  btn  gt Add option lt  button gt    lt select id  mySelect  gt  lt  select gt  x000D   x000D   x000D

User · Answer

select id   append     lt option gt     value  v  text  t

User · Answer

I like to use non jquery approach   mySelect add new Option  My option   1

User · Answer

Based on dule s answer for appending a collection of items  a one-liner for   in will also work wonders    x000D   x000D  let cities     ny   New York   ld   London   db   Dubai   pk   Beijing   tk   Tokyo   nd   New Delhi    x000D   x000D  for let c in cities      selectCity   append     lt option gt    value  c text  cities c      x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 4 0 jquery min js  gt  lt  script gt  x000D   lt select  id  selectCity  gt  lt  select gt  x000D   x000D   x000D    Both object values and indexes are assigned to the options  This solution works even in the old jQuery  v1 4

User · Answer

var select       myselect    var newOptions                      red     Red                    blue     Blue                    green     Green                    yellow     Yellow                    option   select  remove      each newOptions  function text  key        var option   new Option key  text       select append   option

User · Answer

You can add options dynamically into dropdown as shown in below example  Here in this example I have taken array data and binded those array value to dropdown as shown in output screenshot  Output      x000D   x000D  var resultData   Mumbai   Delhi   Chennai   Goa   x000D    document  ready function    x000D     var myselect       lt select gt     x000D         each resultData  function index  key    x000D        myselect append      lt option gt  lt  option gt    val key  html key     x000D             x000D            selectCity   append myselect html     x000D      x000D   lt script src  https   ajax aspnetcdn com ajax jQuery jquery-3 2 1 min js  gt  x000D   lt  script gt  x000D   x000D   lt select  id  selectCity  gt  x000D   x000D   lt  select gt  x000D   x000D   x000D

User · Answer

There are two ways  You can use either of these two   First       waterTransportationFrom   append   lt option value  select  selected  selected  gt Select From Dropdown List lt  option gt       Second     each dataCollecton  function val  text                    options append     lt option gt  lt  option gt    val text route  html text route

User · Answer

This is the way i did it  with a button to add each select tag     document  on  click    button  function            id table AddTransactions   append   lt option gt  lt  option gt

User · Answer

Not mentioned in any answer but useful is the case where you want that option to be also selected  you can add   var o   new Option  option text    value    o selected true      mySelect   append o

User · Answer

This is very simple       select id   append   lt option value  five  selected  selected  gt Five lt  option gt       or      select id   append     lt option gt                          value  1                      text   One

User · Answer

function           var option       lt option gt  lt  option gt          option text  Display text         option val  1             Select1   append option         If you getting data from some object  then just forward that object to function       function  product         var option       lt option gt  lt  option gt          option text product Name        option val product Id            Select1   append option         Name and Id are names of object properties   so you can call them whatever you like   And ofcourse if you have Array   you want to build custom function with for loop   and then just call that function in document ready   Cheers

User · Answer

How about this   var numbers    1  2  3  4  5   var option        for  var i 0 i lt numbers length i          option      lt option value     numbers i       gt     numbers i      lt  option gt                   items   append option

User · Answer

You can add option using following syntax  Also you can visit to way handle option in jQuery for more details             select   append     lt option gt     value 1  text  One            select   append   lt option value  1  gt One lt  option gt       var option   new Option text  value       select   append   option

User · Answer

You can append and set the Value attribute with text       id   append     lt option gt  lt  option gt    attr  value       text           id   append     lt option gt  lt  option gt    attr  value    4   text  Financial Institutions

[javascript] Adding options to a <select> using jQuery?

Examples related to javascript

Examples related to jquery

Examples related to html-select