Using HTML <select> control to select areas on the map

HTML

<script type="text/javascript" src="http://www.amcharts.com/lib/3/ammap.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<div id="chartdiv"></div>				
<select onchange="selectArea(this);" id="select">
    <option value="">Select a state</option>
    <option value="US-CA">California</option>
    <option value="US-IL">Illinois</option>
    <option value="US-FL">Florida</option>
    <option value="US-NY">New York</option>
</select>

CSS

body {
    font-family: Verdana;
    font-size: 12px;
    padding: 10px;
}
#chartdiv {
	width	: 100%;
	height	: 500px;
}			
#select {
    position: absolute;
    top: 40px;
    right: 40px;
    font-size: 15px;
    padding: 10px;
}

JavaScript

var map = AmCharts.makeChart("chartdiv", {
	type: "map",
    "theme": "none",
    pathToImages: "http://www.amcharts.com/lib/3/images/",

	colorSteps: 10,

	dataProvider: {
		map: "usaLow",
        getAreasFromMap: true
	},

	areasSettings: {
		autoZoom: true
	}

});

function selectArea(select) {
    var id = select.options[select.selectedIndex].value;
    if ( '' == id ) {
        map.clickMapObject(map.dataProvider);
    }
    else {
        map.clickMapObject(map.getObjectById(id));
    }
}