JSFiddle - React, Tailwind, and code Playground

HTML

<select name="" id="cities">
    <option value="">Select city...</option>
    <option value="city-1">City 1</option>
    <option value="city-2">City 2</option>
</select>
<select name="" id="shops">
    <option value="">Select shop...</option>
    <optgroup data-for="city-1" label="City-1">
        <option value="">City 1 Shop -1</option>
        <option value="">City 1 Shop -2</option>
        <option value="">City 1 Shop -3</option>
    </optgroup data-for="city-2">
    <optgroup data-for="city-2" label="City-2">
        <option value="">City 2 Shop -1</option>
        <option value="">City 2 Shop -2</option>
        <option value="">City 2 Shop -3</option>
    </optgroup>  
</select>

JavaScript

/* var cities = document.getElementById("cities");
var shops = document.getElementById("shops");
cities.addEventListener("change", function(){
  var groups = shops.querySelectorAll("optgroup");
    for(var i = 0, l = groups.length; i < l; i++)
        groups[i].style.display = "none";
    var active_group = shops.querySelector("optgroup[data-for='" + this.value + "']");
    active_group.style.display = "block";
}); */