JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css">
<table>
<tr><td><SELECT id=m_ListBoxDocClasses class=listbox multiple size=1> <OPTION value=(all)>(all)</OPTION><OPTION value=22>bmp</OPTION> <OPTION value=24>doc</OPTION> <OPTION value=25>docx</OPTION> <OPTION value=19>gif</OPTION> <OPTION value=23>html</OPTION> <OPTION value=20>jpg</OPTION> <OPTION value=15>pdf</OPTION> <OPTION value=21>png</OPTION> <OPTION value=26>ppt</OPTION> <OPTION value=27>pptx</OPTION> <OPTION value=17>xls</OPTION> <OPTION value=18>xlsx</OPTION></SELECT></td><td><input type="button" value="Click Me" /></td></tr>
<tr><td><SELECT id=m_ListBoxDocClasses class=listbox multiple size=1> <OPTION value=(all)>(all)</OPTION><OPTION value=22>bmp</OPTION> <OPTION value=24>doc</OPTION> <OPTION value=25>docx</OPTION> <OPTION value=19>gif</OPTION> <OPTION value=23>html</OPTION> <OPTION value=20>jpg</OPTION> <OPTION value=15>pdf</OPTION> <OPTION value=21>png</OPTION> <OPTION value=26>ppt</OPTION> <OPTION value=27>pptx</OPTION> <OPTION value=17>xls</OPTION> <OPTION value=18>xlsx</OPTION></SELECT></td><td><input type="button" value="No! Click Me!" /></td></tr>
</table>
JavaScript
//alert($(".listbox").length);
$(":button").button();
(function(a){a.widget("ui.dropdownchecklist",{version:function(){alert("DropDownCheckList v1.3")},_appendDropContainer:function(b){var d=a("<div/>");d.addClass("ui-dropdownchecklist ui-dropdownchecklist-dropcontainer-wrapper");d.addClass("ui-widget");d.attr("id",b.attr("id")+"-ddw");d.css({position:"absolute",left:"-33000px",top:"-33000px"});var c=a("<div/>");c.addClass("ui-dropdownchecklist-dropcontainer ui-widget-content");c.css("overflow-y","auto");d.append(c);d.insertAfter(b);d.isOpen=false;return d},_isDropDownKeyShortcut:function(c,b){return c.altKey&&(a.ui.keyCode.DOWN==b)},_isDropDownCloseKey:function(c,b){return(a.ui.keyCode.ESCAPE==b)||(a.ui.keyCode.ENTER==b)},_keyFocusChange:function(f,i,c){var g=a(":focusable");var d=g.index(f);if(d>=0){d+=i;if(c){var e=this.dropWrapper.find("input:not([disabled])");var b=g.index(e.get(0));var h=g.index(e.get(e.length-1));if(d<b){d=h}else{if(d>h){d=b}}}g.get(d).focus()}},_handleKeyboard:function(d){var b=this;var c=(d.keyCode||d.which);if(!b.dropWrapper.isOpen&&b._isDropDownKeyShortcut(d,c)){d.stopImmediatePropagation();b._toggleDropContainer(true)}else{if(b.dropWrapper.isOpen&&b._isDropDownCloseKey(d,c)){d.stopImmediatePropagation();b._toggleDropContainer(false);b.controlSelector.focus()}else{if(b.dropWrapper.isOpen&&(d.target.type=="checkbox")&&((c==a.ui.keyCode.DOWN)||(c==a.ui.keyCode.UP))){d.stopImmediatePropagation();b._keyFocusChange(d.target,(c==a.ui.keyCode.DOWN)?1:-1,true)}else{if(b.dropWrapper.isOpen&&(c==a.ui.keyCode.TAB)){}}}}},_handleFocus:function(f,d,b){var...