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 id="dropdown1" class="ui fluid selection dropdown">
  <input type="hidden" name="choices" value="">
  <i class="dropdown icon"></i>
  <div class="default text">None</div>
  <div class="menu">
    <div class="item" data-value="">Default</div>
    <div class="item" data-value="c1">Choice 1</div>
    <div class="item" data-value="c2">Choice 2</div>
  </div>
</div>

<div>&nbsp;</div>

<div id="dropdown2" class="ui fluid selection dropdown">
  <input type="hidden" name="dynamic-stuff" value="">
  <i class="dropdown icon"></i>
  <div class="default text">None</div>
  <div class="menu">
    <div class="item" data-value="">Default</div>
  </div>
</div>

CSS

body {
    padding: 1em;
}

JavaScript

// Add javascript here
var choices = {
  c1: [
    {value: "c1r1", label: "Choice 1 - Result 1"},
    {value: "c1r2", label: "Choice 1 - Result 2"}
  ],
  
  c2: [
    {value: "c2r1", label: "Choice 2 - Result 1"},
    {value: "c2r2", label: "Choice 2 - Result 2"}
  ]
}

$("#dropdown1").dropdown({
  	onChange: function(value) {
      if(!value) { //prevents from doing anything if user selected "Default"
        return ;
      }
      
      var d = $.Deferred(); //use deferred to make it look like we are doing an ajax call
      
      d.done( function(results) {
        var $menu = $("#dropdown2").find(".menu").empty(); //clear out old options
      
        $menu.append('<div class="item" data-value="">Default</div>'); //add default option
        for(var i in results) {
          $menu.append('<div class="item" data-value="' + results[i].value + '">' + results[i].label + '</div>'); //add results
        }
        $menu = null;

        $("#dropdown2")
          .removeClass("loading")
          .dropdown()
          .dropdown("set selected", ""); //set default for dd2
        
        $("#dropdown1").dropdown("set selected", ""); //back to default for dd1
      });
      
      setTimeout(function() {
        d.resolve(choices[value]);
      }, 750); //simulate ajax call (as if we did it)
      
      $("#dropdown2").addClass("loading");
    }
});

$("#dropdown2").dropdown();