Hello all, first off I should say that I am only 3 months into learning any sort of development, so I'm about as green as they come. Also, first post

Basically what I want is to be able to use a dropdown menu (3 choices of cities) to select and display a map of the selected city. I have the dropdown coded, and the links to an embedded google map of each city, I just have no idea how to display only one based on the dropdown selection.

Here is the dropdown:

Code:
<script>
 function currCity() {
   var loc=document.getElementById("loc");
   document.getElementById("cit").value=loc.options[loc.selectedIndex].text;
 }
</script>
Code:
<form id="cityselect" class="grid_6 omega">
 Select your location:
 <select id="loc" onchange="currCity()">
   <option></option>
   <option>Chicago</option>
   <option>Dallas</option>  
   <option>Minneapolis</option>
 </select>
</form>
Here are the 3 maps:

Code:
<!-- Chicago -->
 <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/?ie=UTF8&amp;ll=41.803054,-87.894745&amp;spn=0.596816,1.344452&amp;t=m&amp;z=10&amp;output=embed"></iframe>
<!-- Dallas -->
 <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/?ie=UTF8&amp;ll=32.763027,-96.738739&amp;spn=0.673255,1.344452&amp;t=m&amp;z=10&amp;output=embed"></iframe>
<!-- Minneapolis -->
 <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/?ie=UTF8&amp;ll=44.93078,-93.148956&amp;spn=0.566809,1.344452&amp;t=m&amp;z=10&amp;output=embed"></iframe>
Thanks!