JSFiddle - React, Tailwind, and code Playground

by Patrick McLaren

HTML

<select name="region" id="region">
    <option value="none">Select a Region...</option>
    <option value="europe">Europe</option>
    <option value="asia">Asia</option>
    <option value="americas">Americas</option>
</select>
<select name="countries" id="country" disabled="true">
    <option value="none">Select a Country...</option>
    <option value="africa/en" class="europe">Africa - English</option>
    <option value="africa/fr" class="europe">Africa - French</option>
    <option value="at/de" class="europe">Austria</option>
    <option value="by/ru" class="europe">Belarus</option>
    <option value="be/nl" class="europe">Belgium - Dutch</option>
    <option value="bg/bg" class="europe">Bulgaria</option>
    <option value="au/en" class="asia">Australia</option>
    <option value="cn/zh" class="asia">China</option>
    <option value="hk/zh" class="asia">Hong Kong - Chinese</option>
    <option value="hk/en" class="asia">Hong Kong - English</option>
    <option value="in/en" class="asia">India</option>
    <option value="id/en" class="asia">Indonesia</option>
    <option value="ca/fr" class="americas">Canada</option>
    <option value="us/en" class="americas">US</option>
</select>
<div id="categories">
    <ul style="float:left;width:230px;">
        <li><a href="/shop/clothes/index.html" target="_blank">Clothes</a>
        </li>
        <li><a href="/shop/food/index.html" target="_blank">Food</a>
        </li>
        <li><a href="/shop/electronics/index.html" target="_blank">Electronics</a>
        </li>
        <li><a href="/shop/games/index.html" target="_blank">Video Games</a>
        </li>
    </ul>

JavaScript

$('select[name="region"]').change(function (event) {
    var countrySelect = $('select[name="countries"]');
    var region = event.target.value;

    // Reset the country select
    countrySelect[0].selectedIndex = 0;

    // Enable/disable the country select
    countrySelect.prop('disabled', region === 'none');

    // Show/hide the corresponding countries
    countrySelect.find('option').each(function (idx, elm) {
        if (elm.className.indexOf(region) > -1) {
            $(elm).show();
        } else {
            $(elm).hide();
        }
    });
});

$('#categories a').each(function (idx, elm) {
    $(elm).click(function (event) {
        event.preventDefault();

        var countrySelect = $('select[name="countries"]')[0];
        if (countrySelect.selectedIndex <= 0) {
            alert('Please select a country first!');
        } else {
            // Change page to adjusted url
            window.location = countrySelect.value + $(elm).attr('href');
        }
    });
});