使用语义下拉菜单进行多选

Question

我正在努力获得使用语义 ui 的多 select 下拉菜单。可以在此处找到完整示例：https://jsbin.com/nowokulihi/edit?html,output 在 "toolbar" 中，单个 select 的第一个下拉列表工作正常，但第二个需要多个 selection 的下拉列表无法正常工作。我不是在这里寻找任何非常复杂的东西，只是 (de)select 列表中每个项目的能力。在下拉列表中使用复选框也可以（也许更好），但我不知道该怎么做。但它必须紧凑并且在该工具栏中可以很好地发挥作用。

<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 键，同时 select 和 deselect 您的项目。

创建 javascript 版本将允许您以更直观的方式 select 您的选项以及格式化下拉列表以像其他表单元素一样在视觉上显示，因为非 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>

使用语义下拉菜单进行多选

Multiselect using semantic dropdown

semantic-ui

dropdown