В простом случае никакие структуры не нужны
<html>
<head>
</head>
<body>
<select id="countries">
<option>russia</option>
<option>ukraine</option>
</select>
<select id="russia" style="display: none">
<option>Moskow</option>
<option>Sp-burg</option>
</select>
<select id="ukraine" style="display: none">
<option>Kiev</option>
<option>Harkov</option>
</select>
<script>
get=document.querySelector.bind(document)
countries=get("#countries")
russia=get("#russia")
ukraine=get("#ukraine")
countries.onchange=function(){
switch(this.value){
case("russia"): russia.style.display="block"; ukraine.style.display="none"; return
case("ukraine"): ukraine.style.display="block"; russia.style.display="none"; return
}
}
</script>
</body>
</html>