title: Semantic-UI Dynamic Dropdown
body: <p>Got a problem with semantic-ui dropdown.
  <br/>
  I've been using Semantic-Ui, and wanted to change the dropdown item dynamically.
  That is, when i choose the value from the first dropdown, the second dropdown's item will change.
  But the thing is, when the items are changed, the second dropdown cannot be chose,
  the value won't change. The dropdown won't collapse back.</p>
  
  <p>The HTML
  <br>
  The First Dropdown</p>
  
  <pre><code>&lt;div id="programmetype" class="ui fluid selection dropdown"&gt;
      &lt;input type="hidden" name="programmetype"&gt;
      &lt;div class="text"&gt;Choose..&lt;/div&gt;
      &lt;i class="dropdown icon"&gt;&lt;/i&gt;
      &lt;div class="menu"&gt;
         &lt;div class="item" data-value="val1"&gt;Car&lt;/div&gt;
         &lt;div class="item" data-value="val2"&gt;Tank&lt;/div&gt;
         &lt;div class="item" data-value="val3"&gt;Plane&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Second Dropdown</p>
  
  <pre><code>&lt;div id="servicetype" class="ui fluid selection dropdown"&gt;
      &lt;input type="hidden" name="servicetype"&gt;
      &lt;div class="text"&gt;Choose..&lt;/div&gt;
      &lt;i class="dropdown icon"&gt;&lt;/i&gt;
      &lt;div class="menu"&gt;
          &lt;div class="item" data-value="select"&gt;Choose..&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>..........................
  <br/>
  The jQuery</p>
  
  <pre><code>$("#programmetype").dropdown({
              onChange: function (val) {
                  if (val == "val1")
                  {
                      $('#servicetype .menu').html(
                          '&lt;div class="item" data-value="val1"&gt;Saloon&lt;/div&gt;' +
                          '&lt;div class="item" data-value="val2"&gt;Truck&lt;/div&gt;'
                          );
                  };
  
                  if (val == "val2")
                  {
                      $('#servicetype .menu').html(
                          '&lt;div class="item" data-value="val1"&gt;Abraham&lt;/div&gt;' +
                          '&lt;div class="item" data-value="val2"&gt;Leopard&lt;/div&gt;' +
                          );
                  };
  
                  if (val == "val3")
                  {
                      $('#servicetype .menu').html(
                          '&lt;div class="item" data-value="val1"&gt;Jet&lt;/div&gt;' +
                          '&lt;div class="item" data-value="val2"&gt;Bomber&lt;/div&gt;' +
                          );
                  };
              }
          });
  </code></pre>