Javascript 需要防止反复添加下拉列表

我将谷歌地图代码与PHP MySql一起使用，根据他们开发者网站上的代码，我已经让地图正常工作了。然而，作为他们代码的一部分，他们在地图下添加了一个菜单（包含所有返回的选项）。问题是，当我执行另一个搜索时，我会得到另一个添加的搜索，而不是已经存在的搜索，并用新信息进行更新。我认为这个问题与locationSelect对象有关，我希望您能提供一些帮助：

  //Variables that we need later
var map;
var markers = [];
var infoWindow;
var locationSelect;
var myLatLng = new google.maps.LatLng(40,-100);
var addmap = ('<div id="map" style="visibility:visible;"></div>');
var addLocationSelect = '</br><div id="locationSelectDiv"><select id="locationSelect"></select></div>';
var subject_text = "";
var subject_id = "";

 function load(myLatlng) {
    map = new google.maps.Map(document.getElementById("map"), {
    center: myLatLng,
    zoom: 3,
    mapTypeId: 'roadmap',
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
  }); 
  google.maps.event.trigger(map, 'resize');

  infoWindow = new google.maps.InfoWindow();
  locationSelect = document.getElementById("locationSelect");
  locationSelect.onchange = function() {
    var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
    if (markerNum != "none"){
      google.maps.event.trigger(markers[markerNum], 'click');
    }
  };
}

function searchLocations() {
     var address = document.getElementById("addressInput").value;
    var subject_text =  $('#search_subject>option:selected').text();
    var subject_id =  $('#search_subject>option:selected').val();
    console.log(address);
    console.log(subject_text);
    console.log(subject_id);

 var geocoder = new google.maps.Geocoder();
 geocoder.geocode({address: address}, function(results, status) {
   if (status == google.maps.GeocoderStatus.OK) {
      $('#container').replaceWith(addmap);

       $("#map").slideDown("4000", function(){    
                    $('#map').after(addLocationSelect);
                           load();
      searchLocationsNear(results[0].geometry.location);

     });
            } else {
     alert(address + ' not found');
   }
 });
}

function clearLocations() {
     infoWindow.close();
     for (var i = 0; i < markers.length; i++) {
       markers[i].setMap(null);
     }
     markers.length = 0;
 locationSelect.innerHTML = "";
     var option = document.createElement("option");
     option.value = "none";
     option.innerHTML = "See all results:";
     locationSelect.appendChild(option);

   }

function searchLocationsNear(center) {
     clearLocations();
     var searchUrl = 'findlocations.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=20';
     downloadUrl(searchUrl, function(data) {
       var xml = parseXml(data);
       var markerNodes = xml.documentElement.getElementsByTagName("marker");
       var bounds = new google.maps.LatLngBounds();
       for (var i = 0; i < markerNodes.length; i++) {
         var name = markerNodes[i].getAttribute("name");
         var address = markerNodes[i].getAttribute("address");
         var distance = parseFloat(markerNodes[i].getAttribute("distance"));
         var latlng = new google.maps.LatLng(
              parseFloat(markerNodes[i].getAttribute("lat")),
              parseFloat(markerNodes[i].getAttribute("lng")));
         createOption(name, distance, i); 
         createMarker(latlng, name, address);
         bounds.extend(latlng);
       }
       map.fitBounds(bounds);
      locationSelect.style.visibility = "visible";
       locationSelect.onchange = function() {
         var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
         google.maps.event.trigger(markers[markerNum], 'click');
       };
      });
    }
function createMarker(latlng, name, address) {
  var html = "<h3>" + name + "</h3><p>The biography will go here</p>";
  var marker = new google.maps.Marker({
    map: map,
    position: latlng
  });
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
  });
  markers.push(marker);
}

function createOption(name, distance, num) {
   var option = document.createElement("option");
  option.value = num;
  option.innerHTML = name + " is " + distance.toFixed(1) + "miles away";
  locationSelect.appendChild(option);
}

//我们以后需要的变量
var映射；
var标记=[]；
var信息窗口；
变量位置选择；
var mylatng=new google.maps.LatLng（40，-100）；
var addmap=（“”）；
var addLocationSelect='
'；
var subject_text=“”；
var subject_id=“”；
功能加载（myLatlng）{
map=new google.maps.map（document.getElementById（“map”）{
中心：myLatLng，
缩放：3，
mapTypeId:“路线图”，
mapTypeControlOptions:{style:google.maps.MapTypeControlStyle.DROPDOWN_MENU}
}); 
google.maps.event.trigger（映射，'resize'）；
infoWindow=new google.maps.infoWindow（）；
locationSelect=document.getElementById（“locationSelect”）；
locationSelect.onchange=函数（）{
var markerNum=locationSelect.options[locationSelect.selectedIndex].value；
如果（markerNum！=“无”）{
google.maps.event.trigger（标记[markerNum]，'click'）；
}
};
}
函数searchLocations（）{
var address=document.getElementById（“addressInput”）.value；
var subject_text=$（“#搜索_subject>option:selected”）.text（）；
var subject_id=$（“#搜索_subject>option:selected”）.val（）；
控制台日志（地址）；
控制台日志（主题文本）；
控制台日志（主题id）；
var geocoder=new google.maps.geocoder（）；
geocoder.geocode（{address:address}，函数（结果，状态）{
if（status==google.maps.GeocoderStatus.OK）{
$（'#container'）。替换为（addmap）；
$（“#映射”）.slideDown（“4000”，function（）{
$（'#map'）。在（addLocationSelect）之后；
加载（）；
searchLocationsNear（结果[0]。几何体。位置）；
});
}否则{
警报（地址+‘未找到’）；
}
});
}
函数clearLocations（）{
infoWindow.close（）；
对于（var i=0；i”；
var marker=new google.maps.marker({
地图：地图，
职位：latlng
});
google.maps.event.addListener（标记'click'，函数（）{
setContent（html）；
信息窗口。打开（地图、标记）；
});
标记器。推（标记器）；
}
函数createOption（名称、距离、数值）{
var option=document.createElement（“选项”）；
option.value=num；
option.innerHTML=name+“是”+distance.toFixed（1）+“英里外”；
locationSelect.appendChild（选项）；
}

createOption（）

完全按照它所说的那样创建一个新选项。如果要添加新搜索的结果（包括标记），则需要将这些结果添加到现有位置

未测试的伪代码

全局

var标志=0\\第一次搜索设置为0

在

searchLocationsNear（）中添加以下内容

searchLocationsNear(center) {
    if(flag ==0){//1st Search
        clearLocations();
    }else{//Sugsequent Searches
        flag =1;
    }

问题是每次searchLocations函数返回时都会添加locationSelect下拉列表。我只是把它移到了函数的顶部，每次输入submit按钮时都会添加fresh，这只会提供一个下拉列表，其中包含地图的结果

function searchLocations() {
    $('#container').replaceWith(addmap);
    var address = document.getElementById("addressInput").value;
    alert(address);
    var subject_text =  $('#search_subject>option:selected').text();
    var subject_id =  $('#search_subject>option:selected').val();
    console.log(address);
    console.log(subject_text);
    console.log(subject_id);
 var geocoder = new google.maps.Geocoder();
 geocoder.geocode({address: address}, function(results, status) {
   if (status == google.maps.GeocoderStatus.OK) {
       $("#map").slideDown("4000", function(){                            
                           load();
      searchLocationsNear(results[0].geometry.location);

     });
            } else {
     alert(address + ' not found');
   }
 });

}
亲爱的Dave-这很好，但现在新的搜索结果被添加到列表中，但我想这样做，以便删除以前的搜索结果并替换为新的搜索结果（而不是简单地将其添加到列表中）-可能吗？因此，这仍将添加另一个我不想要的下拉列表-我希望保留相同的下拉框，但更改其中的内容以反映新的搜索results@Mobaz我已经用我自己的数据库运行了您的原始代码（添加缺少的函数）。输入新搜索时，原始下拉列表将被清除，新结果将按设计添加。请参阅我的。你到底想做什么不同于此？奇怪-当我运行它时，我添加了多个下拉列表，但设法将其修复（添加了一个答案）注意$（“#container”）.replaceWith（addmap）；已经移到函数的顶部，这似乎解决了问题-谢谢