刷新而不刷新整个页面
[英]make refresh without refreshing the all page
问题描述
I made 2 dropdownlists which are filled from my database. 
我做了2个下拉列表，这些列表从我的数据库中填充。 In the first drop are countries and in the second are cities. 首先是国家，其次是城市。 When a user selects a country automatically in the second drop down appears all the cities from that country. 当用户在第二个下拉列表中自动选择一个国家时，将显示该国家的所有城市。 The problem is that when I select another country all the page is refreshing and I want just that 2 drop down lists to do the refresh. 问题是，当我选择另一个国家/地区时，所有页面都会刷新，而我只希望那2个下拉列表进行刷新。 I'm using Javascript and PHP. 我正在使用Javascript和PHP。 Here are the codes: 以下是代码：
@$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 "  ";
echo "<select name='subcat'><option value=''></option>";
while($noticia = mysql_fetch_array($quer)) {
echo "<option value='$noticia[subcategory]'>$noticia[subcategory]</option>";
}
echo "</select>";
and this is the Javascript code: 这是Javascript代码：
function reload(form)
{
var val=form.cat.options[form.cat.options.selectedIndex].value;
self.location='index.php?cat=' + val ;
}
I want that when I change the country the all page doesn't refresh only those 2 drop down lists. 我希望当我更改国家/地区时，所有页面都不会仅刷新这2个下拉列表。 Any help will be much appreciated. 任何帮助都感激不尽。
4 个解决方案
解决方案1
3 2012-10-04 08:45:46
U can use Ajax for acheving this. 您可以使用Ajax实现这一目标。
Pls check this link Populate select list 请检查此链接填充选择列表
If U are using jquery use .ajax() . 如果U正在使用jquery，请使用.ajax() 。 Example of jquery ajax select list populate is Jquery Ajax Select List Populate jQuery ajax选择列表填充示例是Jquery Ajax选择列表填充
解决方案2
2 2012-10-04 08:45:30
You need to use ajax. 您需要使用ajax。 A very rudimentary suggestion would be: 一个非常基本的建议是：
//self.location = '...' - removed
ajax('index.php?cat=' + val).done(function (result) {
//update select boxes
});
解决方案3
1 2012-10-04 10:48:52
Try this 尝试这个
index.php 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>
And in select_2.php 并在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
0 2012-10-04 11:05:26
Yep you're going to need to use AJAX in order to just update part of the page. 是的，您将需要使用AJAX来更新页面的一部分。 The easiest way to use AJAX is through JQuery. 使用AJAX的最简单方法是通过JQuery。 Here's their API for AJAX . 这是他们的AJAX API 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.