JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html>
	<head>
	<title>BEAT | Login</title>
	<link rel="shortcut icon" href="images/favi.ico">
	</head>
	
	<body>
		<div id="login">
			<form>
				Name: <input type="text"></input>
				<br/>
				
				Age: <input type="text"></input>
				<br/>
				State: <select id="state">
						  <option value="A">A</option>
						  <option value="B">B</option>
						  <option value="C">C</option>
						  <option value="D">D</option>
						</select>
						<br/>
                <div id="region">
				Region: <select>
							<option value="north">North</option>
							<option value="south">South</option>
                    </select></div>
			</form>
		</div>
	</body>
</html>

JavaScript

var state = document.getElementById("state");
state.addEventListener("change",function(){
var selected = state.options[state.selectedIndex].text;
    if(selected == 'A' || selected == 'B'){
        document.getElementById('region').style.display = 'block';    
    }   
    else{
        document.getElementById('region').style.display = 'none';
    }
});