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']==@$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 ;
}

我希望当我更改国家/地区时，所有页面不会仅刷新这两个下拉列表。任何帮助都感激不尽。

4

4 回答 4

3

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

请检查此链接填充选择列表

如果 U 使用 jquery，请使用.ajax(). jquery ajax 选择列表填充的示例是Jquery Ajax 选择列表填充

于 2012-10-04T08:45:46.493 回答
2

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

//self.location = '...' - removed
ajax('index.php?cat=' + val).done(function (result) {
   //update select boxes
});
于 2012-10-04T08:45:30.223 回答
1

尝试这个

索引.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>';

   }
    }

     ?>
于 2012-10-04T10:48:52.303 回答
0

是的，您将需要使用 AJAX 来更新页面的一部分。使用 AJAX 最简单的方法是通过 JQuery。这是他们的 AJAX API。

于 2012-10-04T11:05:26.523 回答