의미 적 드롭 다운을 사용하는 다중 선택

Question

의미 론적 UI를 사용하여 다중 선택 드롭 다운을 얻으려고 애쓰는 중입니다. 전체 예제는 여기에서 찾을 수 있습니다. https://jsbin.com/nowokulihi/edit?html,output "도구 모음"에서 단일 선택 인 첫 번째 드롭 다운은 정상적으로 작동하지만 다중 선택이 필요한 두 번째는 올바르게 작동하지 않습니다. 나는 매우 정교한 것을 찾고 있지 않다. 목록에있는 각 항목을 (de) 선택할 수있는 능력이다. 드롭 다운에서 체크 박스를 사용하는 것도 괜찮을 것입니다 (아마도 더 좋을 것입니다).하지만 어떻게 할 수 있는지는 알 수 없습니다. 그러나 그것은 작고 그 도구 모음에서 멋지게 재생해야합니다. 당신이 시맨틱 UI의 Dropdown 모듈의 자바 스크립트 버전을 작성하지 않으면

<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

는, 브라우저는 사용자가 선택한 항목의 선택을 해제하면서 Ctrl 키 키를 누른 상태입니다 기본 <select multiple> 동작을 사용합니다.

자바 스크립트 버전을 만들면보다 직관적 인 방식으로 옵션을 선택할 수있을뿐 아니라 비 자바 스크립트 버전이 상당히 원시적으로 보일 수 있기 때문에 드롭 다운을 다른 양식 요소처럼 시각적으로 표시 할 수 있습니다.

$('.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>