JSFiddle - React, Tailwind, and code Playground

by wxwxw

HTML

<label>Select vehicle type:</label>
<select id="vehicletype">
  <option value="" selected>Pick one...</option>
</select>

<label>Select location:</label>
<select id="location">
  <option value="" selected>Pick one...</option>
</select>

<label>Select color:</label>
<select id="color">
<option value="" selected>Pick one...</option>
</select>

<label>Select day:</label>
<select id="day">
  <option value="" selected>Pick one...</option>
</select>

CSS

label {
    display:block;
}

select {
  width: 200px;
  margin-bottom: 20px;
}

JavaScript

$(document).ready(function ()
{

	var data = JSON.parse('{"511":{"name":"Location 1","vehicles":{"115":{"type":"Car","color":"Blue","available":["Monday","Tuesday"]},"116":{"type":"Bicyle","color":"Red","available":["Monday","Saturday"]},"117":{"type":"Car","color":"Green","available":["Monday","Tuesday","Wednesday","Friday","Sunday"]}}},"512":{"name":"Location 2","vehicles":{"230":{"type":"Van","color":"Green","available":["Friday","Sunday"]},"231":{"type":"Boat","color":"Yellow","available":["Wednesday","Thursday","Saturday"]},"232":{"type":"Car","color":"Blue","available":["Monday","Tuesday"]},"233":{"type":"Bicyle","color":"Red","available":["Monday","Tuesday"]},"234":{"type":"Bicyle","color":"Green","available":["Monday","Tuesday"]}}},"513":{"name":"Location 3","vehicles":{"442":{"type":"Boat","color":"Green","available":["Tuesday","Wednesday","Thursday"]},"443":{"type":"Car","color":"Yellow","available":["Saturday","Sunday"]},"444":{"type":"Bicyle","color":"Blue","available":["Monday","Tuesday"]},"445":{"type":"Car","color":"Red","available":["Monday","Tuesday"]},"446":{"type":"Bicyle","color":"Green","available":["Friday"]}}}}');
  
$("select").bind("change", function (e)
{ 
		// Perform filtering and update dropdown menus    
}); 
  
 function showAvailable()
 {		
		for (const [locationID, locationDetails] of Object.entries(data))
		{    		
			 	option = $("<option></option>", {'value': locationID, 'text': locationDetails.name});			 
			 	$('#location').append(option);        
        
			 for (const [vehicleID, vehicleDetails] of Object.entries(locationDetails.vehicles))
			 {
       		option = $("<option></option>", {'value': vehicleDetails.color, 'text': vehicleDetails.color});	
       		if (!$("#color option[value='"+vehicleDetails.color+"']").length) $('#color').append(option); // Prevent duplicates      				 
			 		          
          option = $("<option></option>", {'value': vehicleDetails.type, 'text': vehicleDetails.type});
          if...