Adding options to select with javascript

Question

I want this javascript to create options from 12 to 100 in a select with id  mainSelect   because I do not want to create all of the option tags manually  Can you give me some pointers  Thanks  function selectOptionCreate        var age   88    line         for  var i   0  i  lt  90  i          line      lt option gt        line    age   i      line      lt  option gt           return line

User · Answer

Often you have an array of related records, I find it easy and fairly declarative to fill select this way:

selectEl.innerHTML = array.map(c => '<option value="'+c.id+'">'+c.name+'</option>').join('');

This will replace existing options.
You can use selectEl.insertAdjacentHTML('afterbegin', str); to add them to the top instead.
And selectEl.insertAdjacentHTML('beforeend', str); to add them to the bottom of the list.

IE11 compatible syntax:

array.map(function (c) { return '<option value="'+c.id+'">'+c.name+'</option>'; }).join('');

User · Answer

Here you go   for   i   12  i  lt   100  i    1         option   document createElement   option         option value   option text   i      select add  option        Live demo  http   jsfiddle net mwPb5     Update  Since you want to reuse this code  here s the function for it   function initDropdownList  id  min  max         var select  i  option       select   document getElementById  id        for   i   min  i  lt   max  i    1             option   document createElement   option             option value   option text   i          select add  option              Usage   initDropdownList   mainSelect   12  100      Live demo  http   jsfiddle net mwPb5 1

User · Answer

I don t recommend doing DOM manipulations inside a loop -- that can get expensive in large datasets  Instead  I would do something like this   var elMainSelect   document getElementById  mainSelect     function selectOptionsCreate       var frag   document createDocumentFragment        elOption    for  var i 12  i lt 101    i        elOption   frag appendChild document createElement  option         elOption text   i        elMainSelect appendChild frag       You can read more about DocumentFragment on MDN  but here s the gist of it      It is used as a light-weight version of Document to store a segment of   a document structure comprised of nodes just like a standard document    The key difference is that because the document fragment isn t part of   the actual DOM s structure  changes made to the fragment don t affect   the document  cause reflow  or incur any performance impact that can   occur when changes are made

User · Answer

The one thing I d avoid is doing DOM operations in a loop to avoid repeated re-renderings of the page   var firstSelect   document getElementById  first select elements id        secondSelect   document getElementById  second select elements id        optionsHTML           i   12   for    i  lt  100  i    1      optionsHTML push   lt option value   Age    i       gt Age    i     lt  option gt       firstSelect innerHTML   optionsHTML join   n    secondSelect innerHTML   optionsHTML join   n      Edit  removed the function to show how you can just assign the html you ve built up to another select element - thus avoiding the unnecessary looping by repeating the function call

User · Answer

When you create a new Option object  there are two parameters to pass  The first is the text you want to appear in the list  and the second the value to be assigned to the option   var myNewOption   new Option  TheText    TheValue      You then simply assign this Option object to an empty array element  for example   document theForm theSelectObject options 0    myNewOption

User · Answer

None of the above solutions worked for me  Append method didn t give error when i tried but it didn t solve my problem  In the end i solved my problem with data property of select2  I used json and got the array and then give it in select2 element initialize  For more detail you can see my answer at below post   https   stackoverflow com a 41297283 4928277

User · Answer

The most concise and intuitive way would be    x000D   x000D  var selectElement   document getElementById  ageselect    x000D   x000D  for  var age   12  age  lt   100  age      x000D    selectElement add new Option age    x000D    x000D  Your age   lt select id  ageselect  gt  lt option value    gt Please select lt  option gt  lt  select gt  x000D   x000D   x000D    You can also differentiate the name and the value or add items at the start of the list with additional parameters to the used functions  HTMLSelect Element  add item   before    new Option text  value  defaultSelected  selected

User · Answer

See  What is the best way to add options to a select from an array with jQuery       mySelect          append     lt option gt      value   key           text value

User · Answer

You could achieve this with a simple for loop   var min   12      max   100      select   document getElementById  selectElementId     for  var i   min  i lt  max  i         var opt   document createElement  option        opt value   i      opt innerHTML   i      select appendChild opt       JS Fiddle demo   JS Perf comparison of both mine and Sime Vidas  answer  run because I thought his looked a little more understandable intuitive than mine and I wondered how that would translate into implementation  According to Chromium 14 Ubuntu 11 04 mine is somewhat faster  other browsers platforms are likely to have differing results though     Edited in response to comment from OP       How  do  I  apply this to more than one element    function populateSelect target  min  max       if   target           return false            else           var min   min    0              max   max    min   100           select   document getElementById target            for  var i   min  i lt  max  i                 var opt   document createElement  option                opt value   i              opt innerHTML   i              select appendChild opt                        calling the function with all three values  populateSelect  selectElementId  12 100       calling the function with only the  id    min  and  max  are set to defaults   populateSelect  anotherSelect        calling the function with the  id  and the  min   the  max  is set to default   populateSelect  moreSelects   50     JS Fiddle demo   And  finally  after quite a delay      an approach extending the prototype of the HTMLSelectElement in order to chain the populate   function  as a method  to the DOM node   HTMLSelectElement prototype populate   function  opts        var settings            settings min   0      settings max   settings min   100       for  var userOpt in opts            if  opts hasOwnProperty userOpt                 settings userOpt    opts userOpt                        for  var i   settings min  i  lt   settings max  i              this appendChild new Option i  i              document getElementById  selectElementId   populate        min   12       max   40       JS Fiddle demo   References    node appendChild    document getElementById    element innerHTML

[javascript] Adding options to select with javascript

Examples related to javascript

Examples related to html