博客
关于我
php jquery ajax 多级联动菜单
阅读量:269 次
发布时间:2019-03-01

本文共 4072 字,大约阅读时间需要 13 分钟。

目前只做了三级,要四、五级的,要自己修改


index.php代码

<?php include("sunland_config.php");?><!DOCTYPE html><html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"><script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script><script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script><title>AJAX Demo</title> <script>       // setTimeout('showLoader()', 100);//这里要延迟一下,直接调用无法显示加载器      //显示加载器.for jQuery Mobile 1.2.0            function showLoader() {            $.mobile.loading('show', {                text: '正在加载中...', //加载器中显示的文字                  textVisible: true, //是否显示文字                  theme: 'a',        //加载器主题样式a-e                  textonly: false,   //是否只显示文字                  html: ""           //要显示的html内容,如图片等              });        }		//隐藏加载器.for jQuery Mobile 1.2.0  		function hideLoader() {			$.mobile.loading('hide');		}</script></head><body><script type="text/javascript">  $(document).ready(function()  {           		//$('#loader').hide();  		//$('#loader3').hide();  		hideLoader();		 		 //一级改变事件,把一级ID传递给PHP文件,返回二级内容 //flid=3 三级		$(".country").change(function()  {  			var id=$(this).val();  			var dataString = 'flid=2&id='+ id ; //flid=2 二级			//$('#loader').show();  //显示数据加载中.... 			showLoader();  //显示数据加载中....				$.ajax ({  					type: "POST",  					url: "04.php",  					data: dataString,  					cache: false,  					success: function(html)  {  					   $("#city").html(html); 					   hideLoader(); 					   //$('#loader').hide();  					   }   				});  		  		}); 				//二级改变事件,把二级ID传递给PHP文件,返回三级内容 //flid=3 三级		$(".city").change(function()  {  			var id=$(this).val();  			 //alert("HTML: " + id2);			var dataString = 'flid=3&id='+ id ;  //flid=3 三级			 //alert("HTML: " + dataString);			 //$('#loader3').show();  //显示数据加载中.... 			 showLoader();  //显示数据加载中....				$.ajax ({  					type: "POST",  					url: "04.php",  					data: dataString,  					cache: false,  					success: function(html)  {  					   $("#city3").html(html); 					   hideLoader(); 					   //$('#loader3').hide();     					   }   				});  		  		}); });  </script>  <div style="margin:20px">  <label>一类:</label> <select name="country" class="country">  <option selected="selected">--Select--</option>  <?php   $sql=mysql_query("select id,title from data_type_dqs where flid = 1");  while($row=mysql_fetch_array($sql))  {  $id=$row['id'];  $data=$row['title'];  echo '<option value="'.$id.'">'.$data.'</option>';   } ?>  </select> <label>二类 :</label>            <!--<img src="images/loader.gif" style="margin-top:8px; float:left" id="loader" alt="正在加载中.." /> -->        <select name="city" id="city" class="city">           <option selected="selected">--Select--</option>        </select></div><label>3类 :</label>           <!--<img src="images/loader.gif" style="margin-top:8px; float:left" id="loader3" alt="正在加载中.." /> -->        <select name="city3" id="city3" class="city3">           <option selected="selected">--Select--</option>        </select></div></body></html>


04.php代码

<?php  include("sunland_config.php");if($_POST['id'])  {  $id=$_POST['id']; $flid=$_POST['flid'];  	  if($_POST['flid']==2)  { //返回二级选择			  $sql=mysql_query("select id,title from data_type_dqs where pid='$id' and flid = '$flid'");  			  while($row=mysql_fetch_array($sql))  			  {  			  $id=$row['id'];  			  $data=$row['title'];  					$tt .='<option value="'.$id.'">'.$data.'</option>';    				}				echo "<option value=>请选择</option>".$tt;  	  }			if($_POST['flid']==3)  { //返回3级选择 			$id=$_POST['id']; 			$flid=$_POST['flid'];  			$sql=mysql_query("select id,title from data_type_dqs where pid2='$id'"); 			$num_rows = mysql_num_rows($sql);			if ($num_rows!=0){ 				while($row=mysql_fetch_array($sql))  {  					$id=$row['id'];  					$data=$row['title'];  										$tt .='<option value="'.$id.'">'.$data.'</option>';    				}				echo "<option value=>请选择</option>".$tt;			}else{				   echo "";				}		  	}  }    ?>  



转载地址:http://gbcx.baihongyu.com/

你可能感兴趣的文章
mysql-group_concat
查看>>
MySQL-redo日志
查看>>
MySQL-【1】配置
查看>>
MySQL-【4】基本操作
查看>>
Mysql-丢失更新
查看>>
Mysql-事务阻塞
查看>>
Mysql-存储引擎
查看>>
mysql-开启慢查询&所有操作记录日志
查看>>
MySQL-数据目录
查看>>
MySQL-数据页的结构
查看>>
MySQL-架构篇
查看>>
MySQL-索引的分类(聚簇索引、二级索引、联合索引)
查看>>
Mysql-触发器及创建触发器失败原因
查看>>
MySQL-连接
查看>>
mysql-递归查询(二)
查看>>
MySQL5.1安装
查看>>
mysql5.5和5.6版本间的坑
查看>>
mysql5.5最简安装教程
查看>>
mysql5.6 TIME,DATETIME,TIMESTAMP
查看>>
mysql5.6.21重置数据库的root密码
查看>>