ブートストラップに複数のチェックボックスがあるコンボボックス

Question

ブートストラップで、添付画像のように複数のチェックボックスオプションを使用してcomboBoxを使用する方法。

私は以下のようにドロップダウンリストで複数のチェックボックスオプションを使用しましたが、チェックボックスをドロップダウンリストにしたいのではなく、イメージが添付されているようにしたいと思います。私は解決策を持って、以下の方法から

<select multiple="multiple"> .... </select> 

Answer 1

<table> 
          <tr> 
           <td> 
            <div 
             style="max-height: 350px; overflow-y: scroll; width: 375px;background: white;" 
             class="scrollbar style-2"> 
             <table class="table"> 
              <thead align="center"> 
               <tr> 
                <th style="text-align: center;background: #5cb85c;color : white;">List</th> 
                <th style="background: white;background: #5cb85c;color : white;"></th> 
               </tr> 
              </thead> 
              <tbody style="background: white;"> 
              <% 
               for (int i = 0; i < 10; i++) { 
              %> 
               <tr style="border: 0"> 
               <td style="border: 0"> 
                <div class="[ form-group ]"> 
                 <input type="checkbox" name="fancy-checkbox-default_p3_ii<%=i%>" 
                  id="fancy-checkbox-default_p3_ii<%=i%>" autocomplete="off" /> 
                 <div class="[ btn-group ]"> 
                  <label for="fancy-checkbox-default_p3_ii<%=i%>" 
                   class="[ btn btn-success ]" style="top: 5px;"> <span 
                   class="[ glyphicon glyphicon-ok ]"></span> <span> </span> 
                  </label> <label for="fancy-checkbox-default_p3_ii<%=i%>" 
                   class="[ btnCustom active ]"> Default Checkbox<%=i%> 
                  </label> 
                 </div> 
                </div> 
               </td> 
              </tr> 
              <% 
               } 
              %> 
              </tbody> 
             </table> 
            </div> 
           </td> 
          </tr> 
         </table>