Rebuilding Semantic UI dropdown

Starting Point

by shubhampokhriyal

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.js"></script>
<form class="ui form">
  <div class=" field">
    <label for="gender">Dynamic Dropdown</label>
    <select name="gender" class="ui dropdown" id="select">
      <option value="">Gender</option>
      <option value="male">Male</option>
      <option value="female">Female</option>
    </select>
  </div>
  <div class="ui divider"></div>
  <div class="ui submit button">Submit</div>
</form>

CSS

body {
  padding: 2em;
}

JavaScript

$(".ui.form").form({
	inline: true,
  on: 'submit',
  fields: {
      gender1: {
        identifier  : 'gender',
        rules: [
          {
            type   : 'empty',
            prompt : 'Please enter a value'
          }
        ]
      }
	}
});

arr = [
	{id: 1, name: "Bob"},
	{id: 2, name: "Barb"}
];
options = [];

for (var i = 0; i < arr.length; i++ ) {
	options.push({
    value: arr[i].id,
    text: arr[i].name,
    name: arr[i].name
  })
}

$("#select").dropdown('setup menu', {values: options});