Use a JavaScript Array to Fill Up a Drop Down Select Box

use a javascript array to fill up a drop down select box

Use a for loop to iterate through your array. For each string, create a new option element, assign the string as its innerHTML and value, and then append it to the select element.

var cuisines = ["Chinese","Indian"];     
var sel = document.getElementById('CuisineList');
for(var i = 0; i < cuisines.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = cuisines[i];
    opt.value = cuisines[i];
    sel.appendChild(opt);
}

DEMO

UPDATE: Using createDocumentFragment and forEach

If you have a very large list of elements that you want to append to a document, it can be non-performant to append each new element individually. The DocumentFragment acts as a light weight document object that can be used to collect elements. Once all your elements are ready, you can execute a single appendChild operation so that the DOM only updates once, instead of n times.

var cuisines = ["Chinese","Indian"];     

var sel = document.getElementById('CuisineList');
var fragment = document.createDocumentFragment();

cuisines.forEach(function(cuisine, index) {
    var opt = document.createElement('option');
    opt.innerHTML = cuisine;
    opt.value = cuisine;
    fragment.appendChild(opt);
});

sel.appendChild(fragment);

DEMO

Javascript fill dropdown from array and select some options

Add attribute multiple to the select element and then, when the condition is met for a given array entry, add attribute selected to the corresponding, newly created option like this option.setAttribute('selected', true);

function addOption_list() {    var month = [["1", "August", "1"], ["1", "January", ""], ["3", "Mars", ""], ["4", "April", ""], ["5", "May", ""], ["2", "February", "1"]];
    var select = document.getElementById('select_table');    for (var i=0; i < month.length;++i){        var option = document.createElement("OPTION"),            txt = document.createTextNode(month[i][1]);        option.appendChild(txt);        option.setAttribute("value", month[i][0]);        if(month[i][2] === '1'){            option.setAttribute('selected', true);            select.insertBefore(option, select.lastchild);        } else {            select.insertBefore(option,select.lastchild);        }    }}
addOption_list();

<select multiple id="select_table"></select>

Reactjs - fill array elements in dropdown list using javascript

The beauty of React and JSX is that you don't have to do DOM manipulation like this. In fact, you shouldn't be doing things like this. Instead you can use your array of options to create the <option>s in JSX, like this:

export default function ComposeEmailForm({ handleCompose, template_titles }) {
  const options = ['1', '2', '3', '4', '5'];

  return (
    <select id='template-select'>
      <option>----</option>
      {options.map(option => <option key={option} value={option}>{option}</option>)}
    </select>
  );
}

Let me know if that helps at all.

Dropdown list to JavaScript array to fill text boxes

Thanks smftre for that. In the end I have opted for the jquery and ajax. and I think it has worked out betted for it originally I was trying to make the code as efficient as possible on bandwidth because the system is to be used but ajax seems to be the standard for a reason and works very well.

---

Related Topics