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

Question

我正在努力使用语义ui进行多选下拉列表。 可在此处找到完整示例：https://jsbin.com/nowokulihi/edit?html,output 在“工具栏”中，单个选择的第一个下拉列表工作正常，但需要多个选择的第二个下拉列表无法正常工作。 我不是在寻找任何非常复杂的东西，只是能够（de）选择列表中的每个项目。在下拉列表中使用复选框也可以（可能更好），但我无法找到如何做到这一点。但它必须紧凑，并在该工具栏中很好地发挥。

<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>