JSFiddle - React, Tailwind, and code Playground

by JonNorman

HTML

<form action="index.php" method="get" id="myForm">     <input type="hidden" class="hidden" name="action" value="show_submit_data" />         <div id="lcol">             <h3>Demo Options:</h3>             <div id="forListOfSelectedItems">                 <ul id="Options_selectedItems">                 </ul>             </div>         </div>         <div id="rcol">                          <select multiple="multiple" name="Options" id="Options">                 <!-- <optgroup label="Phrases"> -->                     <option>A regular option</option>                     <option selected="selected" value="500">A preselected option</option>                     <option value="regular2">Another regular option</option>                     <option value="longOption">This is a really long option with text that should wrap.</option>                     <option disabled="disabled" value="disabled">A disabled item</option>                     <option value="regular3">Yet another regular option</option>                     <option>This % one has, I think, many / crazy characters.</option>                 <!-- </optgroup> -->                 <!-- <optgroup label="Models"> -->                 <option>600-X-DC</option> <option>700-X-DC</option> <option>800-X-DC</option> <option>900-X-DC</option> <option>1000-X-DC</option> <option>1100-X-DC</option> <option>1200-X-DC</option> <option>1300-X-DC</option> <option>1400-X-DC</option> <option>1500-X-DC</option> <option>1600-X-DC</option> <option>1700-X-DC</option> <option>1800-X-DC</option> <option>1900-X-DC</option> <option>2000-X-DC</option> <option>2100-X-DC</option> <option>2200-X-DC</option> <option>2300-X-DC</option> <option>2400-X-DC</option> <option>2500-X-DC</option> <option>2600-X-DC</option> <option>2700-X-DC</option> <option>2800-X-DC</option> <option>2900-X-DC</option> <option>3000-X-DC</option> <option>3100-X-DC</option> <option>3200-X-DC</option> <option>3300-X-DC</option> <option>3400-X-DC</option>...

CSS

@charset "utf-8";
/**
 * CSS for the "toChecklist" jQuery plugin, by Scott Horlbeck
*/

div.checklist, div.checklistHighlighted { overflow-y: auto; overflow-x: hidden; /* If you don't want scrollbars, leave this one blank. */ }
div.checklist { border: 1px solid gray; border-left: 3px solid #ccc; color: #555; font-family: arial; font-size: 12px;  line-height: 1.6em; }
div.checklistHighlighted { border: 1px solid gray; border-left: 3px solid #ffffa7; }

ul.checklist { list-style-type: none; margin: 0; padding: 0; }
div.checklist li { padding: 3px; }
div.checklist li.even { background-color: white; }
div.checklist li.odd { background-color: #f7f7f7; }
div.checklist li.even:hover, div.checklist li.odd:hover, div.checklist li.focused, div.checklist li:hover label { background-color: #dde; }
div.checklist li.checked { background: #ffffa7; font-style: italic; }
div.checklist li.checked:hover, div.checklist li.checked:hover label { background: #ffff22; font-style: italic; }

div.checklist label.disabled { color: #ddd; }

/*div.checklist li { position: relative; }*/
div.checklist li input { display: block; float: left; }
div.checklist label { display: block; margin: 0; padding: 0; }
div.checklist label.leaveRoomForCheckbox { display: block; padding-left: 25px; /* If hiding checkboxes, set padding-left to 3px */ } 

ul.showSelectedItems { color: #770; font-size: .8em; list-style-position: outside; margin-left: 0; padding-left: 1.4em; }
ul.showSelectedItems li:hover { cursor: pointer; color: red; text-decoration: line-through; }

/**** Search box ****/
div.findInList { margin-bottom: 5px; }
div.findInList input { background-color: #ffffef; border: solid 1px #eee; color: black; font-family: arial; font-size: .8em; padding: 2px; }
div.findInList input.blurred { background-color: white; color: gray; }

div.checklist li.optgroup { font-size: 1.1em; font-weight: bold; font-style: italic; background-color: #ccc; border-top: 1px solid #777; border-bottom: 1px solid #777;...

JavaScript

/**
 * toChecklist plugin (works with jQuery 1.3.x and 1.4.x)
 * @author Scott Horlbeck <[email protected]>
 * @url http://www.scotthorlbeck.com/code/tochecklist/
 * @version 1.4.3
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details (LICENSE.txt or
 * http://www.gnu.org/copyleft/gpl.html)
 *
 * Thanks to the UNM Health Sciences Library and Informatics Center
 * (http://hsc.unm.edu/library/) for funding the initial creation
 * of this plugin and allowing me to publish it as open source software.
*/
(function($) {

jQuery.fn.toChecklist = function(o) { // "o" stands for options

    // Since o can be a string instead of an object, we need a function that
    // will handle the action requested when o is a string (e.g. 'clearAll')
    var updateChecklist = function(action,checklistElem) {
                    
        // Before we operate on all checkboxes, we need to make sure that
        // showSelectedItems is disabled, at least temporarily. Otherwise,
        // this process will be REALLY slow because it tries to update the
        // DOM a thousand times unnecessarily.
        // (We will only do this if the list is greater than 3 items.)
        
        var showSelectedItemsSetting;
        
        var disableDynamicList = function(checklistLength) {
            if (checklistLength > 3) {
                showSelectedItemsSetting = $(checklistElem).attr('showSelectedItems');
                $(checklistElem).attr('showSelectedItems', 'false');
            }
        };
        
        var enableDynamicList =...