JSFiddle - React, Tailwind, and code Playground

by homer2

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css">
<ul id="m_RadioButtonList" class="ui-widget-content radioButtonList">
<li><input id="m_RadioButtonListOrgs_0" type="radio" name="ctl00$MainContent$m_RadioButtonListOrgs" value="10002;0;0"><label for="m_RadioButtonListOrgs_0">m_RadioButtonListOrgs_0</label></li>
<li><input id="m_RadioButtonListOrgs_1" type="radio" name="ctl00$MainContent$m_RadioButtonListOrgs" value="10002;7;0"><label for="m_RadioButtonListOrgs_1">m_RadioButtonListOrgs_1</label></li>
<li><input id="m_RadioButtonListOrgs_2" type="radio" name="ctl00$MainContent$m_RadioButtonListOrgs" value="10002;7;10077"><label for="m_RadioButtonListOrgs_2">m_RadioButtonListOrgs_2</label></li>
<li><input id="m_RadioButtonListOrgs_3" type="radio" name="ctl00$MainContent$m_RadioButtonListOrgs" value="10002;7;10078"><label for="m_RadioButtonListOrgs_3">m_RadioButtonListOrgs_3</label></li>
<li><input id="m_RadioButtonListOrgs_4" type="radio" name="ctl00$MainContent$m_RadioButtonListOrgs" value="10002;7;10079"><label for="m_RadioButtonListOrgs_4">m_RadioButtonListOrgs_4</label></li>
<li><input id="m_RadioButtonListOrgs_5" type="radio" name="ctl00$MainContent$m_RadioButtonListOrgs" value="10002;7;10080"><label for="m_RadioButtonListOrgs_5">m_RadioButtonListOrgs_5</label></li>
<li><input id="m_RadioButtonListOrgs_6" type="radio" name="ctl00$MainContent$m_RadioButtonListOrgs" value="10002;7;10019"><label for="m_RadioButtonListOrgs_6">m_RadioButtonListOrgs_6</label></li>
<li><input id="m_RadioButtonListOrgs_7" type="radio" name="ctl00$MainContent$m_RadioButtonListOrgs" value="10002;7;10082"><label for="m_RadioButtonListOrgs_7">m_RadioButtonListOrgs_7</label></li>
<li><input id="m_RadioButtonListOrgs_8" type="radio" name="ctl00$MainContent$m_RadioButtonListOrgs" value="10002;7;10083"><label for="m_RadioButtonListOrgs_8">m_RadioButtonListOrgs_8</label></li>
<li><input id="m_RadioButtonListOrgs_9" type="radio"...

CSS

.dropdownSelect-Label
{            
    display: inline-block; 
    white-space: nowrap; 
    overflow: hidden;
    width: 180px;
}

.dropdownSelect-ScrollContainer.expanded
{
    position: absolute;
    overflow: auto;
    height: 600px;
    z-index: 9999;
}

.dropdownSelect-ScrollContainer.collapsed
{
    position: absolute;
    overflow: hidden;
    height: 0px;
}
.dropdownSelect-Close
{
    cursor: pointer;
}

.dropdownSelect ul
{
    list-style-type: none;
    padding:0; 
    margin:0;
}

JavaScript

(function ($) {

    var methods = {
        init: function (options) {

            // Create some defaults, extending them with any options that were provided
            var settings = $.extend({
                'includeSelectAll': true,
                'selectAllText': '(all)',
                'selectAllValue': '',
                'includeClose': true,
                'closeText': 'close...',
                'noneSelectedText': '(all)'
            }, options);

            return this.each(function () {
                //alert($(this).attr("id"));
                var controlType = " type = '" + $(this).find(":input:first").attr("type") + "' ";
                var radioName = $(this).find(":radio:first").attr("name");
                radioName = radioName == null ? "" : " name='" + radioName + "' ";
                var allControl = settings.includeSelectAll ? "<li class='ui-state-default'><input class='dropdownSelect-All' " + controlType + radioName + " /><label>" + settings.selectAllText + "</label></li>" : "";
                var closeControl = settings.includeClose ? "<li class='dropdownSelect-Close ui-state-default'>" + settings.closeText + "</li>" : "";

                $(this).prepend(allControl).append(closeControl)
                       .wrapAll("<span class='dropdownSelect ui-widget'><span class='dropdownSelect-ScrollContainer ui-widget collapsed' /></span>")
                       .parent().before("<span class='ui-state-default' ><span class='dropdownSelect-Label'></span><span style='display:none;' class='expandIcon'>▼</span><span class='expandIcon'>►</span></span><br/>");

                $("li", this).addClass("ui-state-default");

                $(".ui-button:visible").hide().show(); //fixes ie bug that positions jQueryUI buttons off of the page

                $(".dropdownSelect-All", this).change(function (e) {
                    //alert("all");
                    e.stopPropagation();
                    if (this.type == "checkbox")...