使用語義下拉的多選select

Question

我正在努力獲得使用語義UI的多選下拉。 可以在這裏找到一個完整的例子：https://jsbin.com/nowokulihi/edit?html,output 在「工具欄」中，第一個下拉菜單是單個選擇工作正常，但需要多個選擇的第二個下拉菜單不能正常工作。 我沒有在這裏尋找任何非常複雜的東西，只是（選擇）列表中的每個項目的能力。在下拉菜單中使用複選框也可以（也許更好），但我無法找到如何做到這一點。但它必須緊湊並在該工具欄中很好地播放。

<div id="viewport" style="width:500px; height:400px;"> 
    <div class="toolbar"> 
    <div class="ui labeled input"> 
     <span class="ui label">Colour:</span> 
     <select class="ui compact dropdown" > 
      <option value="red">Red</option> 
      <option value="green">Green</option> 
      <option value="blue">Blue</option> 
     </select> 

     <span class="ui label">Display:</span> 
     <select name="display" class="ui compact dropdown" multiple> 
      <option value="1">Item 1</option> 
      <option value="2">Item 2</option> 
      <option value="3">Item 3</option> 
     </select> 
    </div> 
    </div> 
    <div class="main" style="height:100%">Get's displayed here</div> 
</div> 

Answer 1

如果不創建語義UI的Dropdown模塊的JavaScript版本，那麼瀏覽器將使用默認<select multiple>行爲，這是按住Ctrl鍵鍵的同時選擇和取消選擇的項目。

創建javascript版本將允許您以更直觀的方式選擇您的選項，並將下拉列表的格式設置爲與其他表單元素類似，因爲非JavaScript版本可能顯得很粗糙。

$('.ui.dropdown').dropdown();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.css" rel="stylesheet"/> 
 
    
 
<div class="ui labeled input"> 
 
    <span class="ui label">Colour:</span> 
 
    <select class="ui compact dropdown" > 
 
    <option value="red">Red</option> 
 
    <option value="green">Green</option> 
 
    <option value="blue">Blue</option> 
 
    </select> 
 
    <span class="ui label">Display:</span> 
 
    <select name="display" class="ui dropdown" multiple> 
 
    <option value="1">Item 1</option> 
 
    <option value="2">Item 2</option> 
 
    <option value="3">Item 3</option> 
 
    </select> 
 
</div>