ajax如何实现级联

原创 2015年07月10日 09:14:15

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
	}
?>


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

ajax实现下拉列表级联

  • 2012年05月13日 14:50
  • 4.2MB
  • 下载

Ajax实现省市区三级级联(数据来自mysql数据库)

实现该技术需要Java解析json技术 整体Demo下载地址如下: 点我下载address.html Insert title here /**...

ajax实现级联菜单

  • 2012年10月08日 10:50
  • 73KB
  • 下载

级联 ajax实现方式

  • 2013年08月14日 13:04
  • 31KB
  • 下载

Ajax的常用技巧(2)---实现Web页面中的级联菜单

在网络上显示数据,往往只显示数据中的一部分信息,如文章标题,产品名称等。如果浏览器要查看所有信息,只需点击相关链接即可。在web技术中,可以采用级联菜单完成上述操作。根据用户的选择,动态展开,并显示出...
  • pzhtpf
  • pzhtpf
  • 2012年08月12日 11:42
  • 3523

JSP+AJAX三级级联及更多级的实现

  • 2012年04月22日 15:53
  • 94KB
  • 下载

ajax实现级联菜单的类子

  • 2009年07月20日 19:50
  • 2.02MB
  • 下载

Ajax实现下拉框二级级联

AJAX实现的简单的无刷新效果,页面中有两个下拉框,当第一个下拉框改变时,提交请求到后台,查找到对应的数据,添加到第二个下拉框列表里。代码如下: //Ajax实现下拉框二级级联,...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ajax如何实现级联
举报原因:
原因补充:

(最多只允许输入30个字)