tring to assign funtion to dropdown menu with bounds

Discussion in 'JavaScript' started by kwood30, Mar 16, 2016.

  1. #1
    m am trying to assign the function of my dropdown menu so when you click on the selected county it will focue on that countie. I have written out what I can below, through research as I am new to all this, but am not sure how to link it all together. I know I haven't got the googlemaps attached but I do in my full page, it is just this section i am having trouble in trying to link together.

    
    <!doctype html>
    <html>
    <head>
    
    <scripttype="text/javascript">
    
    document.getElementById('counties').addEventListener('click',function(e){alert(this.value); e.preventDefault();},false);
    $('bedfordshire').click(function(){
    alert(this.value);});
    $('buckinghamshire').click(function(){
    alert(this.value);});
    $('cambridgeshire').click(function(){
    alert(this.value);});
    $('hertfordshire').click(function(){
    alert(this.value);});
    $('northamptonshire').click(function(){
    alert(this.value);});
    
    //bedfordshire
    bounds =new google.maps.LatLngBounds();
    bounds.extend(new google.maps.LatLng(52.33,-0.05));
    bounds.extend(new google.maps.LatLng(51.8,-0.8));
    map.fitBounds(bounds);
    
    //buckinghamshire
    bounds =new google.maps.LatLngBounds();
    bounds.extend(new google.maps.LatLng(52.21,-0.33));
    bounds.extend(new google.maps.LatLng(51.47,-1.33));
    map.fitBounds(bounds);
    
    //cambridgeshire
    bounds =new google.maps.LatLngBounds();
    bounds.extend(new google.maps.LatLng(52.75,-0.55));
    bounds.extend(new google.maps.LatLng(51.99,-0.53));
    map.fitBounds(bounds);
    
    //hertfordshire
    bounds =new google.maps.LatLngBounds();
    bounds.extend(new google.maps.LatLng(52.09,-0.35));
    bounds.extend(new google.maps.LatLng(51.59,-0.80));
    map.fitBounds(bounds);
    
    //northamptonshire
    bounds =new google.maps.LatLngBounds();
    bounds.extend(new google.maps.LatLng(52.67,-0.33));
    bounds.extend(new google.maps.LatLng(51.94,-1.35));
    map.fitBounds(bounds);
    
    
    </script>
    
    </head><body><selectid="Counties"><optionvalue="">Select County</option><optionvalue="bedfordshire">Bedfordshire</option><optionvalue="buckinghamshire">Buckinghamshire</option><optionvalue="cambridgeshire">Cambridgeshire</option><optionvalue="hertfordshire">Hertfordshire</option><optionvalue="northamptonshire">Northamptonshire</option></select>
    
    </body>
    </html>
    
    Code (markup):
     
    kwood30, Mar 16, 2016 IP
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    Well, I'm hoping that the errors are due to some formatting error? Because <optionvalue= isn't gonna work. It's <option value="">title</option> - besides, there's no need to use value="" if the content of value is the same as the text in the option - ie, in your case, get rid of the value alltogether - and since that first one, the "Select county" is a descriptor, not an actual, usable option, it should be disabled and selected at the beginning - ie <option disabled selected>Select county</option>

    But, if that's not the problem - what do you see? Doesn't it alert? Doesn't it do anything? What does console tell you?
     
    PoPSiCLe, Mar 17, 2016 IP