MultiColumn MultiSelect - Colorboxes

by chayacooper

HTML

<script src="https://dl.stellenticket.de/tmp/jquery.multiselect.js"></script>
<link rel="stylesheet" href="https://dl.stellenticket.de/tmp/jquery.multiselect.css">
<form>
<div id="container">    
    <div id="attributes-Colors" class="filterOptions" data-type="color">  
         <select multiple id="filter"> 
            <option value="All">All Colors</option>
            <option value="white"><div style="background-color: Navy;" class="colorBox">&#10003;</div>Blue</option>
            <option value="Red" data-background="Red">Red</option>
            <option value="Black">Black</option>
            <option value="Gray">Gray</option> 
       </select> 
    </div>    
                
    <div>  
        <ul id="content">
            <li data-color='["Black"]'>Item 1 - Black</li>
            <li data-color='["Blue", "Red", "Black"]'>Item 2 - Blue, Red, Black</li>     
            <li data-color='["Black & White"]'>Item 3 - Black & White</li>      
            <li data-color='["Black"]'>Item 4 - Black</li>       
            <li data-color='["Black"]'>Item 5 - Black</li>       
            <li data-color='["Red", "Black"]'>Item 6 - Red, Black</li>     
            <li data-color='["Black"]'>Item 7 - Black</li>      
            <li data-color='["Gray"]'>Item 8 - Gray</li>  
        </ul>
    </div>    
</div>
</form>

CSS

body {font-size:8pt;}
.ui-multiselect-checkboxes ul { float:left; list-style:none; padding:0px;margin:0px;}
.ui-multiselect-checkboxes { position:relative /* fixes bug in IE6/7 */; overflow-y:hidden;  }
.ui-multiselect-checkboxes label { cursor:default; display:block; border:1px solid transparent; padding:0px 0px;}
.ui-multiselect-checkboxes label input { position:relative; top:1px; } 

..colorBox {
    border: 1px solid silver;
    vertical-align:baseline;
    margin-right:4px;
    margin-left:6px;
    width: 1.65em;
    height:1.65em;
    font-size:8px;
    float:left;
}

ol, ul {
    list-style: none;
}
.filterOptions ul {
    margin: 10px 0;
    overflow: hidden;
}
.filterOptions ul li {
    margin-right: 2px;
    float: left;
}
.filterOptions ul li a {
    padding: 0 10px;
    border: 1px solid #999;
    background: #cfcfcf;
    color: #fff;
    font-weight: bold;
    line-height: 20px;
    text-decoration: none;
    display: block;
}
.filterOptions ul li a:hover {
    background: #c9c9c9;
}
.filterOptions ul li.active a {
    background: #999;
}

#content {
    float: right;
}

CoffeeScript

# do something when its created
$("#filter").on 'multiselectcreate', ->
  # get the dropdown menu
  menu = $(this).multiselect 'widget'

     var spans = $("label span");
    spans.each(function () {
        var elem = $('<div class="colorBox"></div>');
        elem.css('background-color', $(this).parent().attr("data-background"));
        $(this).prepend(elem);
    });
    
  menu.find('label span').each ->
    # add color based on value
   # $(this).parent().css('background-color', $(this).val());
    # $(this).parent().css('background-color', 'white');
       
 
             
    menu.find('label span').each ->
    # add color based on value
   # $(this).parent().css('background-color', $(this).val());
     $(this).css('background-color', 'red');
     $(this).css('border', '1px solid silver');

$(document).ready ->    
  $("#filter").multiselect()  
  $("#filter").on "change.hideshow", (e) ->
    vals = $(this).val()
    list_items = $("#content li")    
    if !vals
      list_items.hide()
    else if 'All' in vals
      list_items.show()
    else       
      $("#content li").each ->
        found = false
        my_colors = $(this).data 'color'
        for val in vals
          if val in my_colors
            found = true
            break
      
        $(this)[if found then 'show' else 'hide']()
  .trigger 'change.hideshow'