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

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 < 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 < 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

<select name="drop1" id="Select1">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

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

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

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

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

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

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

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?

Pure Javascript Create Element Solution

JSFiddle Demo

Examples related to javascript

Examples related to html

Examples related to drop-down-menu

Examples related to html-select