JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<p>
erewrewr
</p>

<div>
  <select class="tweedmenu" id="viewsAvailable" onchange="selectDataView();">
			  <option value="" selected="">Select a view..</option>
			  <optgroup label="Percentage Users Logging In" data-components="gauge,bar" data-component-names="Gauge,Bar Graph">
				<option value="loginsLast90Days" data-label="90 Days" data-label-2="Logged In" data-suffix="Users logged in over the past 90 Days">The Last 90 Days</option>
				<option value="loginsLast60Days" data-label="60 Days" data-label-2="Logged In" data-suffix="Users logged in over the past 60 Days">The Last 60 Days</option>
				<option value="loginsLast30Days" data-label="30 Days" data-label-2="Logged In" data-suffix="Users logged in over the past 30 Days">The Last 30 Days</option>
				<option value="loginsLast14Days" data-label="14 Days" data-label-2="Logged In" data-suffix="Users logged in over the past 14 Days">The Last 14 Days</option>
				<option value="loginsLast7Days" data-label="7 Days" data-label-2="Logged In" data-suffix="Users logged in over the past 7 Days">The Last 7 Days</option>
				<option value="loginsLast24Hours" data-label="24 Hours" data-label-2="Logged In" data-suffix="Users logged in over the past 24 Hours">The Last 24 Hours</option>
			  </optgroup>
			  <optgroup label="Percentage Users Completing Courses" data-components="gauge,bar" data-component-names="Gauge,Bar Graph">
				<option value="usersCompletingCoursesLast90Days" data-label="90 Days" data-label-2="Completed Courses" data-suffix="Users completing courses over the past 90 Days">The Last 90 Days</option>
				<option value="usersCompletingCoursesLast60Days" data-label="60 Days" data-label-2="Completed Courses" data-suffix="Users completing courses over the past 60 Days">The Last 60 Days</option>
				<option value="usersCompletingCoursesLast30Days" data-label="30 Days" data-label-2="Completed Courses" data-suffix="Users...

CSS

div.tweed-menu-component{
  font-family: Helvetica, serif;
  font-size: 14px;
  position: relative;
}
div.tweed-menu-component>ul{
  list-style: none;
  padding: 0px;
  margin: 0px;
  display: inline-block;
  height: 27px;
  overflow: hidden;
  background-color: #f5f5f5;
}
div.tweed-menu-component.focus>ul{
  overflow: auto;
  height: auto;
  max-height: 400px;
}
div.tweed-menu-component>ul>li{
  line-height: 21px;
  padding: 3px;
  padding-left: 8px;
  padding-right: 8px;
  cursor: default;
}
div.tweed-menu-component>ul>li:hover{
  background-color: #ccc;
}
div.tweed-menu-component>ul>li>ul{
  display:none;
  list-style: none;
  padding: 0px;
  margin: 0px;
  background-color: #fff;
  margin-left: -8px;
  margin-right: -8px;
  margin-bottom: -3px;
  margin-top: 3px;
}
div.tweed-menu-component>ul>li>ul>li{
  line-height: 21px;
  padding: 3px;
  padding-left: 8px;
  padding-right: 8px;
  cursor: default;
}

JavaScript

$(document).click(function(){

	$('.tweed-menu-component').removeClass('focus');

});


$('select.tweedmenu').each(function(){

	var el = $(this);

	var componentHolder = $('<div class="tweed-menu-component"></div>');
	var component = $('<ul></ul>');
  
  componentHolder.click(function(e){
  
    componentHolder.addClass('focus');

    e.stopPropagation();

  });
  
  componentHolder.append(component);

  $(this).find('>optgroup').each(function(){
  
  	var label = $(this).attr('label');

		var groupitem = $('<li>' + label + '</li>');
    
    var subgroup = $('<ul></ul>');
    
    groupitem.click(function(e){
  
  		subgroup.toggle();
      
      //e.stopPropagation();

    });
    
    groupitem.append(subgroup);
    
    $(this).find('>option').each(function(){
    
    	var label = $(this).text();
			var value = $(this).attr('value');

			var subitem = $('<li data-value="' + value + '">' + label + '</li>');
      
      subgroup.append(subitem);
      
      subitem.click(function(e){
  
        e.stopPropagation();

      });
    
    });
    
    component.append(groupitem);

  });
  
  $(this).parent().append(componentHolder);
  $(this).hide();

});