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写级联效果,动态从数据库获取数据

要实现的级联数据的效果是,咨询方式有多种,有的有子咨询方式,有的没有,直接上图图一中选择自选方式,例如:选择面询,效果如图二,后面对应的有面询的子咨询方式,有的没有子咨询方式,如图三,没有子咨询方式,...
  • sunping177
  • sunping177
  • 2016年09月08日 16:56
  • 1442

ajax技术实现select三级联动

本文利用ajax技术从数据库中获取数据,动态实现select三级联动,效果图如下: 前端js代码如下: $(document).ready(function(){ $.ajax({ typ...
  • adgjlxxx
  • adgjlxxx
  • 2015年12月18日 17:22
  • 2209

Java SSH 项目总结——Ajax+Json 级联菜单

前言   前台JSP页面需要实现下拉菜单的级联效果,实现方式如题,采用Ajax+Json,分享下实现过程。     正题       先看下效果图:     前台   注册地址 ...
  • zwk626542417
  • zwk626542417
  • 2014年11月26日 08:14
  • 13571

级联 ajax实现方式

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

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

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

ajax实现下拉列表级联

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

ajax实现级联菜单

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

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

  • 2016年09月08日 17:42
  • 1.94MB
  • 下载

使用Ajax实现三级级联菜单获取区号与邮政编码 PHP MySQL

  • 2011年07月12日 12:03
  • 76KB
  • 下载

ajax技术实现级联下拉列表代码.doc

  • 2011年10月29日 12:10
  • 34KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ajax如何实现级联
举报原因:
原因补充:

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