JSFiddle - React, Tailwind, and code Playground

by joevallender

HTML

<label for="continent">Continent</label>
<select id="continent">
    <option value=""> -- Please select -- </option>
    <option value="asia">Asia</option>
    <option value="europe">Europe</option>
</select>

<label for="country">Country</label>
<select id="country"></select>

CSS

body { padding: 40px; font-family: Arial, helvetica; }
label { display: block; font-weight: bold; padding-bottom: 6px; }
select { margin-bottom: 20px }

JavaScript

var data = {
    asia: [
         'china',
         'japan'
    ],
    europe: [
         'france',
         'germany'
    ]
}
    
$('#continent').change(function(){
    var value = $(this).val();
    var list = data[value];
    $('#country').empty();
    $('#country').append(new Option(' -- Please select -- ',''));
    for(var i = 0; i < list.length; i++) {
       $('#country').append(new Option(capitaliseFirstLetter(list[i]),list[i]))   
    }
})
    
// Helper from http://stackoverflow.com/questions/1026069/capitalize-the-first-letter-of-string-in-javascript
function capitaliseFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}