2012-10-04 239 views
0

我做了2个从我的数据库填充的下拉列表。第一滴是国家,第二滴是城市。当用户在第二个下拉菜单中自动选择一个国家时,会显示该国家的所有城市。问题是,当我选择另一个国家所有的页面刷新,我只想要2下拉列表进行刷新。我正在使用JavaScript和PHP。下面是代码:刷新而不刷新所有页面

@$cat=$_GET['cat']; 




$quer2=mysql_query("SELECT DISTINCT category,cat_id FROM category order by category"); 

if(isset($cat) and strlen($cat) > 0){ 
$quer=mysql_query("SELECT DISTINCT subcategory FROM subcategory where cat_id=$cat order by subcategory"); 
}else{$quer=mysql_query("SELECT DISTINCT subcategory FROM subcategory order by subcategory"); } 




echo "<select name='cat' onchange=\"reload(this.form)\"><option value=''>Select one</option>"; 
while($noticia2 = mysql_fetch_array($quer2)) { 
if($noticia2['cat_id'][email protected]$cat){echo "<option selected value='$noticia2[category]'>$noticia2[category]</option>"."<BR>";} 
else{echo "<option value='$noticia2[cat_id]'>$noticia2[category]</option>";} 
} 
echo "</select>"; 
echo "&nbsp&nbsp"; 
echo "<select name='subcat'><option value=''></option>"; 
while($noticia = mysql_fetch_array($quer)) { 
echo "<option value='$noticia[subcategory]'>$noticia[subcategory]</option>"; 
} 
echo "</select>"; 

,这是Javascript代码:

function reload(form) 
{ 
var val=form.cat.options[form.cat.options.selectedIndex].value; 
self.location='index.php?cat=' + val ; 
} 

我想,当我改变这个国家的所有网页不刷新只有2下拉列表。任何帮助都感激不尽。

+1

使用jQuery + Ajax代替PHP来获得您的需求。 –

+0

你好。我想今天你问了两个关于使用Google API来确定两点之间的距离的问题,但是你删除了它们。请记住,如果您经常这样做,您的帐户可能会因提出新问题而暂时锁定。 – halfer

回答

2

您需要使用ajax。一个非常基本的建议是:

//self.location = '...' - removed 
ajax('index.php?cat=' + val).done(function (result) { 
    //update select boxes 
}); 
1

试试这个

的index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() 
{ 
$(".Select1").change(function() 
{ 
var id=$(this).val(); 
var dataString = 'your_param='+ your_param; 
$.ajax 
({ 
    type: "POST", 
    url: "select_2.php", 
    data: dataString, 
    cache: false, 
    success: function(html) 
    { 
    $(".Select2").html(html); 
    } 
    }); 

    }); 
    }); 
    </script> 

    <title>Untitled Document</title> 
    </head> 

    <body> 
    <?php 
    include("config.php"); 
    $sql="SELECT * FROM your_table"; 
    $result2 = mysql_query($sql); 
    ?> 
    <select class="Select1"> 
    <option value=""></option> 
    <?php 
    while($row2 = mysql_fetch_array($result2)) 
    { 
    ?> 
    <option value="<?php echo $row2['your_value']?>"><?php echo $row2['your_value']?> </option> 

    <?php 
    }    
    ?> 
    </select><br /> 
    <select class="Select2"></select> 
</body> 
</html> 

而且在select_2.php

<?php 
include('config.php'); 
if($_POST['your_param']) 
    { 
    $your_param=$_POST['your_param']; 
    $sql = mysql_query("SELECT * FROM yortable WHERE param = '".$your_param."'") or die(mysql_error()); 

while($row=mysql_fetch_array($sql)) 
{ 
$your_value=$row['your_param']; 
echo '<option></option>'; 
    echo '<option value="'.$your_value.'">'.$your_value.'</option>'; 

    } 
    } 

    ?> 
0

是的,你要去需要使用AJAX才能更新部分页面。使用AJAX最简单的方法是通过JQuery。 Here's their API for AJAX