#5666

HTML

<link rel="stylesheet" href="https://semantic-ui.com/dist/semantic.css">
<script src="https://semantic-ui.com/dist/semantic.js"></script>
<div class='ui form'>
  <div class='field'>
      <label for="year">Year:</label>
      <div class="ui selection dropdown year">
        <input type="hidden" name="year">
        <i class="dropdown icon"></i>
        <div class="default text">Year</div>
        <div class="menu">
          <div class="item" data-value="2016" data-month="[1, 2, 3]">2016</div>
          <div class="item" data-value="2017" data-month="[4, 5, 6]">2017</div>
        </div>
      </div>
  </div>
  <div class="field">
    <label for="month">Month:</label>
      <div class="ui selection dropdown month">
        <input type="hidden" name="month">
        <i class="dropdown icon"></i>
        <div class="default text">month</div>
        <div class="menu">
          <div class="item" data-value="4">4</div>
          <div class="active item" data-value="5">5</div>
          <div class="active item" data-value="6">6</div>
        </div>
      </div>
  </div>
</div>

CSS

body {
    padding: 1em;
}

JavaScript

$('.ui.dropdown.year').dropdown({
  onChange: function (value, text, $choice) {
    var arr = [];
    var months = $choice.data('month');
    for (var i = 0; i < months.length; i++) {
      var m = months[i];
      arr.push({value: m, name: m});
    }
    arr[arr.length - 1].selected = true;
    $('.ui.dropdown.month')
    	.dropdown('change values', arr)
    
    console.log(
      $('.ui.dropdown.month').dropdown('get value'),
    )
  }
})
.dropdown('set selected', '2017')
$('.ui.dropdown.month').dropdown();
alert('ddd');