如何刷新div只有当选择类型

不是所有的页面我有这种代码选择餐厅的类型，当我选择任何类型。我们刷新页面并执行一些SQL过程来获取我选择的所有类型的餐厅，并在Google地图中显示它。如何刷新div只有当选择类型

那么，我怎样才能不刷新所有页面。

只刷新Google地图div。

<select class="mapleftS" name="type" id="type" onchange="changeType(this.value)"> 
    <option value="0">كل الانواع</option> 
    <?$type = mysql_query("select * from rest_type "); 
    while($rod = mysql_fetch_array($type)) { 
     if($rod[id] == $_REQUEST['type']) 
      $selll = 'selected'; 
     else {$selll = ''; 
    ?> 
    <option value="<?=$rod[id]?>" <?=$selll?> ><?=$rod[name]?></option> 
    <? } ?>            
</select> 
<script> 
    function changeType(id) { 
     parent.location = '?type=' + id; 
    } 
    $(function() { 
     var text_menu = $("#type option:selected").text(); 
     $("#ddddd_").html(text_menu); 
    }); 
</script>

，当我选择它是这样做的代码： -

if($_REQUEST['type']) { 
// do some thing and refrsh map div 
} else { 
// do some thing and refrsh map div 
}

，这是地图的div

<div id="mppp" class="map"></div>

JS的谷歌地图

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAsVCH2AY7nJecNz41eiAGCMdupbk0qNnE&sensor=true"></script> 

<script type="text/javascript"> 
    var address_index = 0, map, infowindow, geocoder, bounds, mapinfo, intTimer; 
    $(function(){ 
    mm(); 
    }); 

    mm = function() { 
    // Creating an object literal containing the properties you want to pass to the map 
    var options = { 
     zoom: 15, 
     center: new google.maps.LatLng(24.701564296830245, 46.76211117183027), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    // Creating the map 
    map = new google.maps.Map(document.getElementById('mppp'), options); 
    infowindow = new google.maps.InfoWindow(); 
    geocoder = new google.maps.Geocoder(); 
    bounds = new google.maps.LatLngBounds(); 

    //******* ARRAY BROUGHT OVER FROM SEARCHRESULTS.PHP ********** 
    mapinfo = [ <?=$da?> ]; 
    intTimer = setInterval("call_geocode();", 300); 
    } 

    function call_geocode() { 
    if(address_index >= mapinfo.length) { 
     clearInterval(intTimer); 
     return; 
    } 
    geocoder.geocode({ 
     location: new google.maps.LatLng(mapinfo[address_index][6], mapinfo[address_index][7]) 
    }, (function(index) { 
      return function(results, status) { 
      if (status == google.maps.GeocoderStatus.OK) { 
       // Scale our bounds 
       bounds.extend(results[0].geometry.location); 
       var $id = mapinfo[index][0]; 
       var $tell = mapinfo[index][3]; 
       var $title = mapinfo[index][2]; 
       var $img_src = mapinfo[index][3]; 
       var img_src = mapinfo[index][1]; 
       var $logo = mapinfo[index][4]; 
       var $status = mapinfo[index][5]; 
       var $sell = mapinfo[index][6]; 
       var $city = mapinfo[index][8]; 
       var marker = new google.maps.Marker({ 
       position: new google.maps.LatLng(mapinfo[index][6], mapinfo[index][7]), 
       icon: { 
        url : '<? bloginfo('url'); ?>' + img_src + '', 
        scaledSize : new google.maps.Size(50,50) 
       }, 
       map: map, 
       scrollwheel: false, 
       streetViewControl: true, 
       title: $title 
       }); 
       google.maps.event.addListener(marker, 'click', function() { 
       // Setting the content of the InfoWindow 
       if (img_src) { 
        var imdd = '<img src="<? bloginfo('url'); ?>' + img_src + '" width="60" height="60" style="margin-left:4px;float:right;" />'; 
       } 
       else { 
        var imdd = ''; 
       } 

       if ($tell) { 
        var tell = 'رقم الهاتف : '+$tell+'<br>'; 
       } 
       else { 
        var tell = ''; 
       }        

       if ($status) { 
        var status = 'الحي : '+$status+'<br>'; 
       } 
       else { 
        var status = ''; 
       } 

       if ($city) { 
        var city = 'المدينة : '+$city+'<br>'; 
       } 
       else { 
        var city = ''; 
       } 

       var content = '<div id="info" style="direction:rtl;font:15px time new roman;font-weight:bolder;position:relative;width:210px;"><a href="#"><div style=" font-size:13px;font-family:Tahoma;font-weight:bolder;text-align:center;font-weight:bold">' + $title + '</div><br><div style="float:right">' + imdd + '</div><div style="float:right;text-align:right;font-family:Tahoma">' + tell + city + status + '</div></a><br /><a style="float:left;color:#d22f00;font-size:12px;font-family:Tahoma" href="<? bloginfo('url'); ?>/rest-det/?id=' + $id + '">المزيد+</a></div>'; 
       infowindow.setContent(content); 
       infowindow.open(map, marker); 
       }); 

       map.fitBounds(bounds); 

       if (mapinfo.length == 1) { 
       map.setZoom(12); 
       } 
      } 
      else { 
       // error!! alert (status); 
      } 
      } 
     } 
    )(address_index) 
    ); 
    address_index++; 
    } 
    </script> 
<div id="mppp" class="map"></div>

来源

2013-10-26 kamkam

每当选择某个类型时，您需要运行一个接收这些div的新信息的ajax调用 –

按令人沮丧的企鹅，你必须执行Ajax呼吁该

如果你已经jQuery的包括你的页面上，你可以使用此代码：

$('.maplefts').on('change', function() { 
    $.ajax({ 
     url: '/post_url', 
     data: $(this).serialize(), 
     success: { 
      alert('success'); 
      //put code to change DIV here 
     } 
    }); 
});

要使用此加载了您的谷歌地图的实例，你可能想看看这个： Load google maps to div loaded by ajax

来源

2013-10-26 18:29:12

如何刷新div只有当选择类型

回答

相关问题