javascript - 下拉菜单及其功能的问题

Question

我创建了一个简单的下拉菜单，其中包含函数。然后我意识到，在执行 functionA 后，我无法再次执行它。我必须先执行 functionB(另一个函数)才能再次执行 functionA...我可以知道如何解决这个问题吗？下面是我的代码。

谢谢!

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> 

Answer 1

问题是，当选择框的值发生变化时，您的代码就会运行，当然，一旦您选择了一个选项，只需再次单击它就不会发生变化/em> 值。

您只需将 this.selectedIndex = 0; 添加到 onChange 即可修复此问题:

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

...但是哇是一种运行代码的复杂方式。我是否可以建议在那里存储命令(更多的是 Command pattern 的风格)，然后让 change_form 处理将其转换为实际运行的代码？这是对其的简约改造( 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>