title: Multiselect using semantic dropdown
body: <p>I'm struggling to get a multi-select dropdown working with semantic ui.
  A full example can be found here: <a href="https://jsbin.com/nowokulihi/edit?html,output" rel="nofollow noreferrer">https://jsbin.com/nowokulihi/edit?html,output</a>
  In the "toolbar" the first dropdown that is a single select is working fine, but the second that needs multiple selection does not work correctly.
  I'm not looking for anything very sophisticated here, just the ability to (de)select each item in the list. Using checkboxes in a dropdown would also be OK (maybe better), but I can't find out how to do that. But it must be compact and play nicely in that toolbar. </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="viewport" style="width:500px; height:400px;"&gt;
    &lt;div class="toolbar"&gt;
      &lt;div class="ui labeled input"&gt;
          &lt;span class="ui label"&gt;Colour:&lt;/span&gt;
          &lt;select class="ui compact dropdown" &gt;
              &lt;option value="red"&gt;Red&lt;/option&gt;
              &lt;option value="green"&gt;Green&lt;/option&gt;
              &lt;option value="blue"&gt;Blue&lt;/option&gt;
          &lt;/select&gt;
  
          &lt;span class="ui label"&gt;Display:&lt;/span&gt;
          &lt;select name="display" class="ui compact dropdown" multiple&gt;
              &lt;option value="1"&gt;Item 1&lt;/option&gt;
              &lt;option value="2"&gt;Item 2&lt;/option&gt;
              &lt;option value="3"&gt;Item 3&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="main" style="height:100%"&gt;Get's displayed here&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>