我是 jquery 和 ajax 的新手，请有人可以帮助这里是我的代码。我的问题是，当我通过一个框搜索一个区域时，当我点击它时，它正在从数据库中获取其内容，但在重新加载页面后盒子还在那儿 我想在搜索后消失
<script type="text/javascript">
$(document).ready( function() {
$('#searchpopup').click(function(){
unloadPopupBox();
});
$('#change').click( function() {
loadPopupBox();
});
// When site loaded, load the Popupbox First
$('#popupBoxClose').click( function() {
unloadPopupBox();
});
$('#container').click( function() {
unloadPopupBox();
});
function unloadPopupBox() { // TO Unload the Popupbox
$('#popup_box').fadeOut("slow");
$("#container").css({ // this is just for style
"opacity": "1"
});
}
function loadPopupBox() { // To Load the Popupbox
$('#popup_box').fadeIn("slow");
$("#container").css({ // this is just for style
"opacity": "0.3"
});
}
/**********************************************************/
});
</script>
<script type="text/javascript">
$(document).ready(function(){
load_options('','country');
});
function load_options(id,index){
$("#loading").show();
if(index=="state"){
$("#city").html('<option value="">Select city</option>');
}
$.ajax({
url: "ajax.php?index="+index+"&id="+id,
complete: function(){$("#loading").hide();},
success: function(data) {
$("#"+index).html(data);
}
})
}
</script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png",
new google.maps.Size(32, 32), new google.maps.Point(0, 0),
new google.maps.Point(16, 32));
var center = null;
var map = null;
var currentPopup;
var bounds = new google.maps.LatLngBounds();
function addMarker(lat, lng, info) {
var pt = new google.maps.LatLng(lat, lng);
bounds.extend(pt);
var marker = new google.maps.Marker({
position: pt,
icon: icon,
map: map
});
var popup = new google.maps.InfoWindow({
content: info,
maxWidth: 300
});
google.maps.event.addListener(marker, "click", function() {
if (currentPopup != null) {
currentPopup.close();
currentPopup = null;
}
popup.open(map, marker);
currentPopup = popup;
});
google.maps.event.addListener(popup, "closeclick", function() {
map.panTo(center);
currentPopup = null;
});
}
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(0, 0),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ZOOM_PAN
}
});
<?php
$query = mysql_query("SELECT * FROM poi_example where country_id='$country' and state_id='$state' and city_id='$city' ")or die(mysql_error());
while($row = mysql_fetch_array($query))
{
$name = $row['name'];
$lat = $row['lat'];
$lon = $row['lon'];
$desc = $row['desc'];
echo("addMarker($lat, $lon, '<b>$name</b><br />$desc');\n");
}
?>
center = bounds.getCenter();
map.fitBounds(bounds);
}
</script>
<body onLoad="initMap()">
<div id="main-carrer">
<div id="map"></div>
<div id="popup_box"> <!-- OUR PopupBox DIV-->
<div style="width:241px; margin:auto;padding-top:40px;">
<form action="map.php" method="post">
<table width="276" height="173" style="margin-left: -20px;margin-top: -28px;">
<tr>
<td width="105"><label>Select Region</label></td>
<td width="155"><select name="country" id="country" onChange="load_options(this.value,'state');">
<option value="">Select Region</option>
</select></td>
</tr>
<tr>
<td><label>Select Country</label></td>
<td><select name="state" id="state" onChange="load_options(this.value,'city');">
<option value="">Select Country</option>
</select></td>
</tr>
<tr>
<td><label>Select City</label></td>
<td><select name="city" id="city">
<option value="">Select City</option>
</select></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="Search" id="searchpopup" style="margin-left:75px;"/></td>
</tr>
</table>
</form>
</div>
<a id="popupBoxClose"><img src="images/cross2.png" style="width:22px; cursor:pointer;"></a>
</div>