JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
	var con_list = "";
	for(var i in continents)
		con_list += "<option>" + i + "</option>";
	$('#continents').html(con_list);
	$('#continents').click(function() {
		var coun_list = "";
		for(var i in continents[$('#continents').val()])
			coun_list += "<option>" + continents[$('#continents').val()][i]['name'] + "</option>";
		$('#countries').html(coun_list);
	});
	$('#countries').click(function() {
		var city_list = "";
		for(var i in continents[$('#continents').val()][$('#countries').val()]['cities'])
			city_list += "<option>" + continents[$('#continents').val()][$('#countries').val()]['cities'][i] + "</option>";
		$('#cities').html(city_list);
	});
});
var continents = {
	Europe: {
		Netherlands: {
			name: "Netherlands",
			cities: [
				"Amsterdam",
				"Rotterdam"
			]
		},
		France: {
			name: "France",
			cities: [
				"Paris",
				"Lyon",
				"Marseille"
			]
		}
	},
	Africa: {
		South_Africa: {
			name: "South_Africa",
			cities: [
				"Kaapstad"
			]
		}
	}
};
</script>
<select id="continents"></select>
<select id="countries"></select>
<select id="cities"></select>