Semantic UI sandbox

HTML

<link rel="stylesheet" href="https://semantic-ui.com/dist/semantic.css">
<script src="https://rawgit.com/Semantic-Org/Semantic-UI/next/dist/semantic.js"></script>

<div class="ui form">
  <h4 class="ui header">Select Dropdown</h4>
  <selectFields class="two fields">
    <div class="field">
      <div class="label">Outside</div>
      <select>
        <option value="walnut" selected="selected">Walnut</option>
        <option value="peanut">Peanut</option>
        <option value="almond">Almond</option>
      </select>
    </div>
    <div class="field">
      <div class="label">Inside</div>
      <div class="ui selection dropdown">
        <select>
          <option value="walnut" selected="selected">Walnut</option>
          <option value="peanut">Peanut</option>
          <option value="almond">Almond</option>
        </select>
        <div class="text"></div>
        <div class="menu"></div>
      </div>
    </div>
  </selectFields>
  <changeSelect class="ui button">Change Select HTML</changeSelect>

  <h4 class="ui header">Regular Dropdown</h4>
  <div class="field">
    <div class="label">No Select</div>
    <otherDropdown class="ui selection dropdown">
      <div class="text">Walnut</div>
      <i class="dropdown icon"></i>
      <div class="menu">
        <div class="active item" data-value="walnut">Walnut</div>
        <div class="item" data-value="peanut">Peanut</div>
        <div class="item" data-value="almond">Almond</div>
      </div>
    </otherDropdown>
  </div>
  <div class="field">
    <div class="label">Empty Dropdown</div>
    <emptyDropdown class="ui selection dropdown">
      <div class="text"></div>
    </emptyDropdown>
  </div>
  <div class="ui divider"></div>
  <changeSettings class="ui button">Refresh With Settings</changeSettings>
</div>

CSS

body {
    padding: 1em;
}

JavaScript

$('select').dropdown();
$('otherDropdown').dropdown();
$('emptyDropdown').dropdown({
  values: [
    {
      name: 'Walnut',
      value: 'walnut'
    },
    {
      name: 'Peanut',
      selected: true,
      value: 'peanut'
    },
    {
      name: 'Almond',
      value: 'almond'
    }
  ]
});

$('changeSettings').click(function() {
  var values = [
    {
      name  : 'Apple',
      value : 'apple'
    },
    {
      name: 'Pear',
      value: 'pear'
    },
    {
      name  : 'Orange',
      value : 'orange'
    }]
  ;
  $('.ui.dropdown').dropdown({ placeholder: 'Select a fruit', values: values });
});

$('changeSelect')
  .on('click', function() {
    $('selectFields select').remove();
    $('selectFields .ui.dropdown').prepend('<select><option value="lettuce">Lettuce</option><option value="cabbage">Cabbage</option><option value="tomato" selected>Tomato</option></select>');
  })
;