在不刷新所有页面的情况下进行刷新答案

【问题标题】：make refresh without refreshing the all page在不刷新所有页面的情况下进行刷新
【发布时间】：2012-10-04 08:37:58
【问题描述】：

我制作了 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']==@$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 个下拉列表。任何帮助都感激不尽。

【问题讨论】：

使用 jQuery + Ajax 代替 PHP，以满足您的要求。
您好。我想你今天问了两个关于使用谷歌 API 来确定两点之间距离的问题，但是你删除了它们。请注意，如果您经常这样做，您的帐户可能会在短时间内被锁定，无法提出新问题。

标签： php javascript

【解决方案1】：

你可以使用Ajax 来实现这一点。

请检查此链接Populate select list

如果你使用 jquery，请使用 .ajax()。 jquery ajax 选择列表填充示例为Jquery Ajax Select List Populate

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

试试这个

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>';

   }
    }

     ?>

【讨论】：

【解决方案4】：

是的，您将需要使用 AJAX 来更新页面的一部分。使用 AJAX 最简单的方法是通过 JQuery。 Here's their API for AJAX.

【讨论】：