JSFiddle - React, Tailwind, and code Playground

by Andrey K

HTML

<link rel="stylesheet" href="http://semantic-ui.com/dist/semantic.css">
<script src="http://semantic-ui.com/dist/semantic.js"></script>
<div class="ui form">
  <div class="field">
    <div class="ui fluid selection dropdown">
      <input type="hidden" name="test">
      <i class="dropdown icon"></i>
      <div class="default text">None</div>
      <div class="menu">
        <div class="item" data-value="1">Choice 1</div>
        <div class="item" data-value="2">Choice 2</div>
      </div>
    </div>
  </div>
</div>

CSS

body {
  padding: 1em;
}

JavaScript

$(".ui.dropdown").dropdown({
  onChange(value, text, $choice) {
    console.log($choice);
  }
});

setTimeout(function() {
  $(".ui.dropdown").dropdown("set selected", "1");
}, 500);

setTimeout(function() {
  $(".ui.dropdown").dropdown("set value", "2").dropdown("set text", "Choice 2");
}, 2500);