amMap: Linking to HTML controls

HTML

<script src="http://www.ammap.com/lib/3/ammap.js"></script>
<script src="http://www.ammap.com/lib/3/maps/js/worldLow.js"></script>
<div id="mapdiv" style="width: 100%; height: 370px;"></div>

<select id="countries" onchange="setMap(this);">
  <option value="">---</option>
  <option value="FR">France</option>
  <option value="US">United States</option>
</select>

JavaScript

var map;

AmCharts.ready(function() {
    map = new AmCharts.AmMap();
    map.pathToImages = "http://www.ammap.com/lib/3/images/";
    //map.panEventsEnabled = true; // this line enables pinch-zooming and dragging on touch devices
    map.balloon.color = "#000000";

    var dataProvider = {
        mapVar: AmCharts.maps.worldLow,
        getAreasFromMap: true
    };

    map.dataProvider = dataProvider;

    map.areasSettings = {
        autoZoom: true,
        selectedColor: "#CC0000"
    };

    map.smallMap = new AmCharts.SmallMap();
    
    map.addListener('clickMapObject', function (event) {
        setSelect(event.mapObject.id);
    });

    map.write("mapdiv");

});

function setMap (select) {
    var mapObject;
    if ( mapObject = map.getObjectById(select.options[select.selectedIndex].value) ) {
        map.clickMapObject(mapObject);
    }
}

function setSelect (id) {
    var select = document.getElementById('countries');
    for (var i in select.options) {
        if (select.options[i].value == id) {
            select.selectedIndex = i;
            return;
        }
    }
}