关闭

ajax如何实现级联

标签: jquerywebajaxphp
420人阅读 评论(0) 收藏 举报

ajax最大的优点就在于可以局部刷新,用户体验很好。

用ajax实现级联可以在不刷新页面的情况下实现与服务器交互。

下面这个例子是,勾选不同的省,对应该省的城市会显示出来,并且数据从数据库读出来。

//html简单布局

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<style>
ul{
width: 500px;
height: 500px;
border: 1px solid black;
}
</style>
</head>
<body>
<?php <pre name="code" class="php"><span style="white-space:pre">	</span>//从数据库读出所有省
include('conn.php'); $sql = "select * from province";$result = mysql_query($sql);?>

<select id="province">
	<option value="0">--省--</option>
	<?php 
<span style="white-space:pre">		</span><span style="white-space:pre"></span>//循环遍历所有省,并显示在select里
		while($row = mysql_fetch_assoc($result)){
		?>
		<option value="<?php echo $row['id'] ?>"><?php echo $row['name'] ?></option>
		<?php
	}?>
</select><pre name="code" class="php">//这里存放所有的市
<select id="city">
		
</select>

//主要用的就是jquery里面的change事件,当下拉框中数据改变时,出发change事件,然后获得省份的id,通过ajax传到服务器端,查询到该省份的市有哪些。

<script>
		$(document).ready(function () {
			$("#province").change(function(event) {
				var select_id = $("#province").val();
				if(select_id != 0){
					$.get("9-2.php",{id:select_id,t:Math.random()},function (data){
						$("#city").html(data);
					})
				}
			});
			
		});
</script>

</body>
</html>


//9-2.php,得到相应的省,通过省来找所有的市在传回回调函数。

<?php 
	include('conn.php');
	$shengid = $_GET['id'];
	$sql = "select * from city where shengid=".$shengid;
	$result = mysql_query($sql);
	while($row = mysql_fetch_assoc($result)){
		?>
		<option value="<?php echo $row['id'] ?> "><?php echo $row['name'] ?></option>
		<?php
	}
?>


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:97230次
    • 积分:1892
    • 等级:
    • 排名:千里之外
    • 原创:91篇
    • 转载:22篇
    • 译文:0篇
    • 评论:6条
    文章分类
    最新评论