MultiSelect Widget - Divided into groups

by j08691

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<div>
    <div class="dropdown_box" id="dropdown_box"><span>Select</span>

    </div>
    <div class="dropdown_container" id="dropdown_container">
        <ul id="select_colors">
            <li>List Item 1</li>
            <li>List Item 2</li>
            <li>List Item 3</li>
            <li>List Item 4</li>
        </ul>
    </div>
</div>

CSS

.dropdown_box {
     background:#ffffff url(images/arrow1.png) no-repeat scroll 97.5% center;
     cursor:pointer;
     display:block;
     font: 7.5pt Verdana, Arial, sans-serif;
     color: #555555;
     border: 1px solid #d3d3d3;
     border-radius:4px;
     -moz-border-radius:4px;
     -webkit-border-radius: 4px;
     -khtml-border-radius: 4px;
     margin:0px;
     padding:0px 25px 0px 3px;
     width:90px;
     line-height: 17.5px;
     height: 17.5px;
     vertical-align: middle;
 }
 .dropdown_container {
     margin:0px;
     padding:0px;
     position:relative;
     color:#555555;
     text-decoration:none;
     outline:none;
 }
 .dropdown_container ul {
     display:none;
     width:90px;
     position:absolute;
     top:0px;
     left:0px;
     margin:0px;
     padding:5px 0px;
     list-style:none;
     background:#ffffff none repeat scroll 0 0;
     border:1px solid #d3d3d3;
     color:#555555;
     border-radius:4px;
     -moz-border-radius:4px;
     -webkit-border-radius: 4px;
     -khtml-border-radius: 4px;
 }
 .dropdown_container ul:hover {
     border: 1px solid #999999;
     color:#212121;
 }
 .dropdown_container ul li {
     vertical-align:middle;
     line-height: 1.65em;
     padding:0px;
     margin: 2px 0;
     display:block;
     font-size: 7pt;
 }
 .dropdown_container ul li a {
     color:#555555;
     text-decoration: none
 }

JavaScript

$('html').click(function () {
    $("#select_colors").hide();
});
$('#dropdown_box, #dropdown_container').click(function (e) {
    e.stopPropagation();
    $("#select_colors").show();
});