How to add Drop-Down list select programmatically

Question

I want to create a function in order to programmatically add some elements on a page    Lets say I want to add a drop-down list with four options    lt select name  drop1  id  Select1  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    How can I do that

User · Answer

Here s an ES6 version  conversion to vanilla JS shouldn t be too hard but I already have jQuery anyways    x000D   x000D  function select options  selected    x000D    return Object entries options  reduce  r   k  v     gt  r append     lt option gt    val k  text v        lt select gt     val selected   x000D    x000D     body   append select   option1    label 1    option2    label 2     option2     x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 1 9 0 jquery min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

x000D   x000D  const cars     Volvo    Saab    Mervedes    Audi    x000D   x000D  let domSelect   document createElement  select    x000D  domSelect multiple   true  x000D  document getElementsByTagName  body   0  appendChild domSelect   x000D   x000D   x000D  for  const i in cars    x000D    let optionSelect   document createElement  option    x000D   x000D    let optText   document createTextNode cars i    x000D    optionSelect appendChild optText   x000D   x000D    document getElementsByTagName  select   0  appendChild optionSelect   x000D    x000D   x000D   x000D

User · Answer

var sel   document createElement  select    sel name    drop1   sel id    Select1    var cars        volvo      saab      mercedes      audi      var options str        cars forEach  function car      options str      lt option value      car      gt     car     lt  option gt         sel innerHTML   options str    window onload   function       document body appendChild sel

User · Answer

This code would create a select list dynamically  First I create an array with the car names  Second  I create a select element dynamically and assign it to a variable  sEle  and append it to the body of the html document  Then I use a for loop to loop through the array  Third  I dynamically create the option element and assign it to a variable  oEle   Using an if statement  I assign the attributes  disabled  and  selected  to the first option element  0  so that it would be selected always and is disabled  I then create a text node array  oTxt  to append the array names and then append the text node to the option element which is later appended to the select element    x000D   x000D  var array     Select Car    Volvo    Saab    Mervedes    Audi    x000D   x000D  var sEle   document createElement  select    x000D  document getElementsByTagName  body   0  appendChild sEle   x000D   x000D  for  var i   0  i  lt  array length    i    x000D    var oEle   document createElement  option    x000D   x000D    if  i    0    x000D      oEle setAttribute  disabled    disabled    x000D      oEle setAttribute  selected    selected    x000D         end of if loop x000D   x000D    var oTxt   document createTextNode array i    x000D    oEle appendChild oTxt   x000D   x000D    document getElementsByTagName  select   0  appendChild oEle   x000D       end of for loop x000D   x000D   x000D

User · Answer

it s very simple yet tricky but here is what you wanted  hope it s helpful   this function generates a select list from 1990 to 2018  i think this example can help ya  if you want to add any other value just  change value of x and y     function dropDown        var start   1990      var today   2019      document write   lt select gt         for  var i   start   i  lt   today  i        document write   lt option gt     i     lt  option gt       document write   lt  select gt      dropDown

User · Answer

const countryResolver    data           gt        const countrySelecter   document createElement  select        countrySelecter className    custom-select       countrySelecter id    countrySelect       countrySelecter setAttribute  aria-label    Example select with button addon         let opt   document createElement  option        opt text    Select language       opt disabled   true      countrySelecter add opt  null       let i   0      for  let item of data            let opt   document createElement  option            opt value   item Id          opt text      i       item Id  -   item Value    item Comment             countrySelecter add opt  null             return countrySelecter

User · Answer

I have quickly made a function that can achieve this  it may not be the best way to do this but it simply works and should be cross browser  please also know that i am NOT a expert in JavaScript so any tips are great    Pure Javascript Create Element Solution function createElement        var element    document createElement arguments 0            text       arguments 1           attr       arguments 2           append     arguments 3           appendTo   arguments 4        for var key   0  key  lt  Object keys attr  length   key             var name   Object keys attr  key                value   attr name                tempAttr   document createAttribute name                tempAttr value   value          element setAttributeNode tempAttr                 if append           for var  key   0   key  lt  append length   key                  element appendChild append  key                         if text  element appendChild document createTextNode text         if appendTo           var target   appendTo      body    document body   document getElementById appendTo           target appendChild element                    return element     lets see how we make this  lt select name  quot drop1 quot  id  quot Select1 quot  gt     lt option value  quot volvo quot  gt Volvo lt  option gt     lt option value  quot saab quot  gt Saab lt  option gt     lt option value  quot mercedes quot  gt Mercedes lt  option gt     lt option value  quot audi quot  gt Audi lt  option gt   lt  select gt   here s how it works     var options             createElement  option    Volvo    value   volvo             createElement  option    Saab    value   saab             createElement  option    Mercedes    value   mercedes             createElement  option    Audi    value   audi                 createElement  select   null      select    name of element to create  null   no text to insert          id   Select1   name   drop1       Attributes to attach          options 0   options 1   options 2   options 3       append all 4 elements          body     append final element to body - this also takes a element by id without the           this is the params createElement  tagName    Text to Insert    any   attribute   here   like   id   mainContainer     elements  to  append  to  this  element    body    container   where to append this element     This function would suit if you have to append many element  if there is any way to improve this answer please let me know  edit  Here is a working demo JSFiddle Demo This can be highly customized to suit your project

User · Answer

This will work  pure JS  appending to a div of id myDiv    Demo  http   jsfiddle net 4pwvg    x000D   x000D  var myParent   document body  x000D   x000D    Create array of options to be added x000D  var array     Volvo   Saab   Mercades   Audi    x000D   x000D    Create and append select list x000D  var selectList   document createElement  select    x000D  selectList id    mySelect   x000D  myParent appendChild selectList   x000D   x000D    Create and append the options x000D  for  var i   0  i  lt  array length  i      x000D      var option   document createElement  option    x000D      option value   array i   x000D      option text   array i   x000D      selectList appendChild option   x000D    x000D   x000D   x000D

User · Answer

Here s an ES6 version of the answer provided by 7stud   const sel   document createElement  select    sel name    drop1   sel id    Select1    const cars        Volvo      Saab      Mercedes      Audi       const options   cars map car   gt      const value   car toLowerCase      return   lt option value    value   gt   car  lt  option gt         sel innerHTML   options   window onload        gt  document body appendChild sel

[javascript] How to add Drop-Down list (<select>) programmatically?

Examples related to javascript

Examples related to html

Examples related to drop-down-menu

Examples related to html-select