Problems with drop down menu and its functions

I have created a simple drop down menu, with functions in it. And then I realized that after I execute functionA, I could not execut开发者_运维百科e it again. I have to execute functionB(another function) before being able to execute functionA again... May I know how can I solve this problem? Below are my codes.

Thanks!

function changeForm(the_form)
{
    window.location = the_form;
}

 //Add Markers by Latitude and Longitude, automatically
  //Listen for click
  function marker()
      {
    google.maps.event.addListener(map, 'click', function(event) {
     addMarker(event.latLng);
   });
      }
                // Place markers in by click
                function addMarker(location) {
              marker = new google.maps.Marker({
              position: location,
              map: map,
              title:"Specified Location",
              icon: 'images/greenPoint.png'
                  });
              markersArray.push(marker);
                 }


  // Choose By Latitude and Longitude, manually
  function admarker()
{

var lat = prompt("Enter latitude (-90 to 90)", "0");
while ((lat < -90) || (lat > 90))
    {
        alert("Latitude must be between -90 to 90");
        var lat = prompt("Enter latitude (-90 to 90)", "0");
    }

var lng = prompt("Enter longitude (-180 to 180)", "0");
while  ((lng < -180) || (lng > 180))
    {
        alert("Longitude must be between -180 to 180");
        var lng = prompt("Enter latitude (-180 to 180)", "0");
    }

lat = parseInt(lat);
lng = parseInt(lng);

var latlng = new google.maps.LatLng(lat, lng);

 var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        clickable: true,
        title:"Specified Location",
        icon: 'images/bluePoint.png'
        })

var infiwindow = new google.maps.InfoWindow({
    content: "Place where you have chosen!"
});

google.maps.event.addListener(marker,'mouseover',function(){
     infiwindow.open(map,marker);
});
google.maps.event.addListener(marker,'mouseout',function(){
    infiwindow.close(map,marker);
});

}

<form name = "formTwo">
<select name = "the_select" onChange = "changeForm(this.value);">
<option value = "#">- - Add Markers By Lat & Long - -</option>
<option value = "javascript:admarker()">Add Markers Manually</option>
<option value = "javascript:readMarker()">Add Markers Automatically</option>

</select></form> 

The problem is that your code gets run when the value of the select box changes, and of course once you've selected an option, just clicking it again doesn't change the value.

You can probably fix it by just adding this.selectedIndex = 0; to your onChange:

<select name = "the_select" onChange = "changeForm(this.value); this.selectedIndex = 0;">

...but wow is that a convoluted way to run code. Rather than actually storing code in the value attribute, can I suggest storing a command there (more in the style of the Command pattern) and then having change_form handle translating that into the actual code to run? Here's a minimalist reworking of that (live example):

<form name = "formTwo">
<select name = "the_select" onChange = "changeForm(this.value); this.selectedIndex = 0;">
<option value = "#">- - Add Markers By Lat & Long - -</option>
<option value = "adMarker">Add Markers Manually</option>
<option value = "readMarker">Add Markers Automatically</option>
</select></form>
<script type='text/javascript'>
  function changeForm(the_form)
  {
    switch (the_form) {
      case "adMarker":
        // Do something
        display("ad marker");
        break;

      case "readMarker":
        // Do something else
        display("read marker");
        break;
    }
  }
</script>

I think if you format your code and arrange it as the following it will work fine :-

I understand you want to change the form according to the option selected in the drop down menu.

it will be as that if I am right in my understanding and I hope it helps you:

--

function changeForm(the_form) { window.location="http://mywebsite/"+the_form+".html"; }

--