Question

This is a relatively straightforward task I’d like to accomplish without jquery or AJAX.

I have a couple javascript arrays A and B, and I have multiple rows in an HTML form that each contain two columns containing dropdowns which will each contain the contents of A and B. I’d like to populate every dropdown of a certain name with a predefined set of items. This can be done after the page has already loaded.

Any ideas as to what the javascript would look like? How can I address a slew of items named one thing?

Answer 1

This is the code for one of your arrays:

// String values; can be used as name, id, or innerHTML 
var valsA = ['one','two','three'];
// Variable to store <option> object
var opt;

// Loop through vals and make an <option> for each one
for(var i=0;i<valsA.length;i++) {
  // Create node
  opt = document.createElement("OPTION");
  // Set innerHTML, if you want
  opt.innerHTML = valsA[i];
  // Set the names to be all the same, if you want
  opt.setAttribute("name","oneThing");
  // Set unique ID, somehow, if you want
  opt.id = "value"+i+valsA[i];
  // Finally, append <option> to dropdown menu
  document.getElementById('myDropdown').appendChild(opt);
}

Your HTML should have a <select id='myDropdown'></select> ready to go before this script is run. You can do the same process for the other array.

Also, keep in mind that names

• are not necessarily unique
• can be used to get groups of items

while IDs

• should be unique
• unfortunately your script will run if they’re not, this can be a source of errors
• should be used to get a single object

So, make sure each of your dropdowns has a unique ID so your script can find it correctly.