title: Semantic UI dropdown change handler
body: <p>I have the following dropdown using Semantic UI:</p>
  <pre><code>&lt;div class=&quot;ui selection dropdown select-language&quot;&gt;
      &lt;input name=&quot;language&quot; type=&quot;hidden&quot; value=&quot;fr-FR&quot;&gt;
      &lt;div class=&quot;text&quot;&gt;French&lt;/div&gt;
      &lt;i class=&quot;dropdown icon&quot;&gt;&lt;/i&gt;
      &lt;div class=&quot;menu ui transition hidden&quot;&gt;
          &lt;div class=&quot;item&quot; data-value=&quot;en-US&quot;&gt;English&lt;/div&gt;
          &lt;div class=&quot;item active&quot; data-value=&quot;fr-FR&quot;&gt;French&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>And in the jQuery side I init it:</p>
  <pre><code>$(&quot;.select-language&quot;).dropdown()
  </code></pre>
  <p>How can I add the <code>change</code> handler?</p>
  <p>The only thing related to this I found in the <a href="http://semantic-ui.com/modules/dropdown.html#/settings" rel="noreferrer">documentation</a>  is:</p>
  <blockquote>
  <p><strong>onChange(value, text)</strong></p>
  <p>Context: Dropdown</p>
  <p>Is called after a dropdown item is selected. receives the name and value of selection.</p>
  </blockquote>
  <p>This sounds a little confusing for me. How can I use it?</p>
  <p><a href="http://jsfiddle.net/BJyQ7/" rel="noreferrer"><strong>JSFIDDLE</strong></a></p>