Question

我制作了两个从我的数据库中填充的下拉列表。第一滴是国家，第二滴是城市。当用户在第二个下拉菜单中自动选择国家/地区时，将显示该国家/地区的所有城市。问题是，当我选择另一个国家时，所有页面都刷新，我只想要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 ;
}

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

Answer 1

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

请检查此链接Populate select list

如果你正在使用jquery使用.ajax()。 jquery ajax选择列表填充的示例是Jquery Ajax Select List Populate

Answer 2

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

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

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

   }
    }

     ?>

Answer 4

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

刷新而不刷新所有页面

4 个答案: