JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.6/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.6/semantic.min.css">
<div id="dd" class="ui search selection dropdown" style="width: 200px;">
  <input type="hidden" value="" />
  <i class="dropdown icon"></i>
  <div class="default text">
    Default
  </div>
  <div class="menu">
    <div class="item" data-value="ONE">Item 1</div>
    <div class="item" data-value="TWO">Item 2
      <div class="sub-menu" style="width: 300px;">
        <div class="item" data-value="A-Part">Item A</div>
        <div class="item" data-value="B-Part">Item B</div>
      </div>
    </div>
    <div class="item" data-value="THREE">Item 3</div>
  </div>
</div>

JavaScript

$("#dd").dropdown({
  onChange: function(text, value, $choice) {
    console.log($("#dd").dropdown("determine intent"));
    alert('You chose: ' + text + ', which carries a value of; ' + value);
  }
});

$("#dd").dropdown("set selected", "1");