My jQuery Dropdown Check List

testing

by litespeedtdf

HTML

<div id="jContainer">



  <select id="projects" multiple="multiple">
    <optgroup  label="j">
      <option value="1">project 1</option>
      <option value="2">project 2</option>
      <option value="3">project 3</option>
    </optGroup>

    <optgroup  label="m">
      <option value="4">project 4</option>
      <option value="5">project 5</option>
      <option value="6">project 6</option>
    </optGroup>
  </select>
</div>

CSS

.ui-dropdownchecklist {
  height: 20px;
  border: 1px solid #ddd;
  border-right: 0;
  background: #fff url(dropdown.png) no-repeat center right;
}

.ui-dropdownchecklist-hover,
.ui-dropdownchecklist-active {
  background-image: url(dropdown_hover.png);
  border-color: #5794bf;
}

.ui-dropdownchecklist-text {
  font-size: 14px;
  height: 20px;
  line-height: 20px;
  margin-right: 17px;
  /* background dropdown.png image */
}

.ui-dropdownchecklist-dropcontainer {
  background-color: #fff;
  border: 1px solid #999;
}

.ui-dropdownchecklist-item {}

.ui-dropdownchecklist-item-hover {
  background-color: #39f;
}

.ui-dropdownchecklist-item-hover .ui-dropdownchecklist-text {
  color: #fff;
}

.ui-dropdownchecklist-group {
  font-weight: bold;
  font-style: italic;
}

.ui-dropdownchecklist-group.nolabel {
  border-bottom: dotted #CCCCCC 1px;
}

.ui-dropdownchecklist-group.nolabel:last-child {
  border-bottom: none;
}

.ui-dropdownchecklist-indent {
  padding-left: 20px;
}
.ui-jm {
  margin-right: 5px;
}

JavaScript

;
(function($) {
  /*
   * ui.dropdownchecklist
   *
   * Copyright (c) 2008-2010 Adrian Tosca, 
   * Copyright (c) 2010-2011 Ittrium LLC
   * Copyright (c) 2015-     W.C.Omohundro
   * Dual licensed under the MIT (MIT-LICENSE.txt) OR GPL (GPL-LICENSE.txt) licenses.
   *
   */
  // The dropdown check list jQuery plugin transforms a regular select html element into a dropdown check list.
  $.widget("ui.dropdownchecklist", {
    // Some globlals
    // $.ui.dropdownchecklist.gLastOpened - keeps track of last opened dropdowncheck list so we can close it
    // $.ui.dropdownchecklist.gIDCounter - simple counter to provide a unique ID as needed
    version: function() {
      alert('DropDownCheckList v1.5');
    },
    // Creates the drop container that keeps the items and appends it to the document
    _appendDropContainer: function(controlItem) {
      var wrapper = $("<div/>");
      // the container is wrapped in a div
      wrapper.addClass("ui-dropdownchecklist ui-dropdownchecklist-dropcontainer-wrapper");
      wrapper.addClass("ui-widget");
      // assign an id
      wrapper.attr("id", controlItem.attr("id") + '-ddw');
      // initially positioned way off screen to prevent it from displaying
      // NOTE absolute position to enable width/height calculation
      wrapper.css({
        position: 'absolute',
        left: "-33000px",
        top: "-33000px"
      });

      var container = $("<div/>"); // the actual container
      container.addClass("ui-dropdownchecklist-dropcontainer ui-widget-content");
      container.css("overflow-y", "auto");
      wrapper.append(container);

      // insert the dropdown after the master control to try to keep the tab order intact
      // if you just add it to the end, tabbing out of the drop down takes focus off the page
      // @todo 22Sept2010 - check if size calculation is thrown off if the parent of the
      //		selector is hidden.  We may need to add it to the end of the document here, 
      //		calculate the...