我有一个国家、城市和地区的三个下拉列表，其中包含初始空白选定值和一个 html 页面上的谷歌地图。当用户从下拉列表中选择位置值时，我正在尝试将地图居中并放大。
所以这是一个我面临问题的场景：
- 用户从国家下拉列表中选择一个国家。
- 我必须在下拉列表更改后检索选择的值。
- 触发事件以更新谷歌地图
我尝试使用 onchange 和更改 javascript 事件，但两者都导致从下拉列表中检索到的文本值成为事件之前的文本值，该事件将空文本（初始空白文本）发送到谷歌地图。
那么，如何在下拉列表更改后触发事件？
这是我的代码：
<asp:DropDownList ID="DropDownList_Country" runat="server" Height="29px" Width="209px"
Font-Size="18px" CausesValidation="false" onchange="MapLocationUpdater();">
function MapLocationUpdater() {
var address = getDropdownListAddress();
geocoder.geocode({ 'address': address },
function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
map.setZoom(11);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
}
else {
alert("Geocode was not successful for the following reason: " + status);
}
}
);
}
function getDropdownListAddress() {
var ddlCountry = document.getElementById("<%=DropDownList_Country.ClientID%>");
var ddlCity = document.getElementById("<%=DropDownList_City.ClientID%>");
var ddlDistrict = document.getElementById("<%=DropDownList_District.ClientID%>");
var CountryTxt = ddlCountry.options[ddlCountry.selectedIndex].text;
var CityTxt = ddlCity.options[ddlCity.selectedIndex].text;
var DistrictTxt = ddlDistrict.options[ddlDistrict.selectedIndex].text;
return CountryTxt + " " + CityTxt + " " + DistrictTxt;
}