JSFiddle - React, Tailwind, and code Playground

by chuckl

HTML

<button id="load-ideas" class="button" name="load-ideas">Load</button>
<div id="loadidealist" title="Load Idea List">
    <div class="loadlist">
        <select name="selectlist" id="selectlist" class="select-idealist" title="Choose an idea list to load" size="10">
            <option class="wedding" value="2">Wedding</option>
            <option class="weddingii" value="3">Wedding II</option>
            <option class="blueandgoldtheme" value="5">Blue and Gold Theme</option>
            <option class="fourthofjuly" value="21">Fourth of July</option>
            <option class="orangeandpumpkin" value="22">Orange and Pumpkin</option>
            <option class="brocades" value="23">Brocades</option>
        </select>
        <div id="selecteditem"><p id="itemselected"></p></div>
    </div>
</div>

CSS

.ui-widget{
    font-family: Verdana,Arial,sans-serif;
    font-size: 1.1em;
    text-align: left;
}
.ui-widget-content{
    color: #222222;
}
.ui-dialog .ui-dialog-content{
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    overflow: auto;
    padding: 0.5em 1em;
    position: relative;
}
element.style {
    height: auto;
    min-height: 52.1333px;
    width: auto;
}
div.loadlist {
    padding: 10px 0;
}
.ui-widget .select-idealist, .select-idealist {
    width: 100%;
}
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
    font-family: Verdana,Arial,sans-serif;
    font-size: 1em;
}
.select-idealist option {
    color: #666666;
    padding: 5px 0 0 15px;
}
div#selecteditem {
    float: left;
    height: 40px;
    margin: 0;
    padding: 5px;
    position: relative;
    width: 100%;
}
p {
    font-size: 1em;
    font-weight: normal;
}

JavaScript

/***********************************************************************
 *    DESIGNER - LOAD IDEA LIST DIALOG
 ***********************************************************************/
$(document).ready(function() {
    
    var idealist   = ''; // Contains the name of the selected idealist
    var listid     = ''; // Contains the record id in the idealist table for the idealist selected
    var item       = $('#itemselected');

    // Get the idea list name from the dialog box
    // list of idea lists.
    $("#selectlist").change(function(event){ 
        alert('Click event on Select has occurred');
        event.stopPropagation();
        
        $("option:selected", $(this)).each(function(){ 
          
            idealist = $(this).text(); // the selected option text is the name of the list
            listid   = $(this).val();  // the selected option value is the list id in the idealist table

            $(item).html('Idea list to be loaded: <br />&nbsp;&nbsp;&nbsp;&nbsp;<strong>' + idealist + '</strong>');
        });
    });
        
  // This function creates the idea list and 
    // sets up the drag and drop functionality. 
    function makelist(){
            
        var fabriclist = $('#gallery > li', '#idealist-gallery');
        
        // Clear the list and headings
        $('#idealist-subhead').empty();
        $('#idealist').empty();
        
        // Show the idea list name in the subheading
        $('#idealist-subhead').append('<span>'+idealist+'</span>');
        
        // Create the idea list from the idealist-gallery
        $(fabriclist).each(function(){
            
            var caption = $(this).find('a').attr('title');
            var tip     = caption+' can be used for: ';
            
            // SET UP LI TITLE FOR TOOLTIPS
            if($(this).hasClass('tablecloth') || $(this).hasClass('banquet')) tip += 'tablecloths, ';
            if($(this).hasClass('overlay')) tip += 'overlays, ';
           ...