JSFiddle - React, Tailwind, and code Playground

populating html dropdown

by jonchius

HTML

<select id="menu">

</select>

JavaScript

dropdown(menuData, "#menu");

function dropdown(data, selector) {

  $.each(data, function(index, value) {
    $(selector).append(setOption(value));
  });

}

function setOption(value) {

  var html; 
  html += '<option id="option-' + value.id + '" value="' + value.id + '">';
  html += value.name; 
  html += '</option>';
  return html;

}

// menu data --- to easily edit, please place in separate file and call the file before the above code
var menuData = [
	{	
    name: 'Level 1',
    id: 'level-1',
  },
  {
    name: 'Level 2',
    id: 'level-2',
	},
  {
    name: 'Level 3',
    id: 'level-3',
  }, 
  {
    name: 'Level 4', 
    id: 'level-4', 
  }
];