What's wrong with this?

First, when I select the value 'USA' it doesn't focus on it, and secondly when I pick 'HEHE' it wont reset the state to 'hidden'...everything else works...

What i want it to do is show 'State' when the user selects 'USA' otherwise just keep it as is...but, if the user accidentally presses USA, and wants to go back to 'HEHE' then hide the 'State' again...

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<style type="text/css">
	#state { visibility: hidden }
</style>
<script language="javascript">
	function select() {
		if (document.globe.country.selectedIndex='USA') {
			state.style.visibility='visible';
		}
		else {
			state.style.visibility='hidden';
		}
	}
</script>

</head>
<body>
<form name="globe" id="globe">
<table width="500" align="center" border="0">
	<tr>
		<td>Country: <select name="country" id="country" onchange="select()">
						<option value="" selected></option>
						<option value="USA">USA</option>
						<option value="HEHE">HEHE</option>
					</select>
		</td>
	</tr>
	<tr id="state">
		<td>State: <select name="state">
						<option value="MN">MN</option>
						<option value="WI">WI</option>
					</select>
		</td>
	</tr>
</table>
</form>
</body>
</html>