JSFiddle - React, Tailwind, and code Playground
HTML
<select class="cat">
<option selected disabled>- Categories -</option>
<option>Bags</option>
<option>Shoes</option>
<option>T-Shirts</option>
</select>
<br>
<select class="subcat">
<option>- select a category -</option>
</select>
<div id="load" data-load='{"Bags":["Dolce & Gabanna", "Versace"],"Shoes":["Nike","Reebok","Adidas"],"T-Shirts":["Police", "Try"]}'></div>
JavaScript
$(document).ready(function(){
$('.cat').change(function(){
var value = $(this).val();
var load = $('#load').data('load');
var lists = "";
for(var cat in load){
if(value === cat){
load[cat].forEach(function(entry){
lists += "<option>"+entry+"</option>";
});
}
}
$('.subcat').html(lists);
});
});