How to pass a dropdown menu from HTML to external Javascript

My problem is I am making a virtual tour using pictures. I have a dropdown menu so when you click on one of the locations it flys you right to that spot. In my javascript file I have the each location in an array. so...

 <div id = "menu">

<select id = 'flyto' onchange = 'putPicture(this)'>
<option value="Hyde">Hyde</option>
<option value="Lamson">Lamson</option>
<option value="Smith">Smith</option>
<option value="Sodexo">Sodexo</option>
</select>

</div

this is my html I have the external javascript including at the top so thats not a problem my problem is in tour.js I have

function putPicture(locaValue)
{ 
  var select = document.getElementById('flyto');
  var location = select.options[select.selectedIndex].value;
  var pano = $('#pano').leanorama(tour.location);
  pano.on('leanoramaHotspotClick', function(e, hotspot) {
   if (hotspot.type == 'nav') $(this).trigger('leanoramaRefresh', 
   tour[hotspot.value]);
  });
}

but up above in my javascript I have each location in an array called tour where each value is the name of the location (Hyde, Lamson, Smith, Sodexo). Is it possible to have the same values in my HTML as in my JS? The pictures wont load and when i switch to a different value in the menu I get an error because I think its taking in only the value from the HTML menu instead of converting it to my Pictures value. Im using leanorama from github that using cubic pictures( so 6 sides to make a panorama)