博客
关于我
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/

你可能感兴趣的文章
Python 优化提速的 8 个小技巧
查看>>
Python 余弦相似度与皮尔逊相关系数 计算
查看>>
python 使用execjs 报编码错误解决办法,UnicodeDecodeError: ‘gbk‘ codec can‘t decode byte 0xac in position 145: il
查看>>
python 使用filetype校验文件
查看>>
Python 使用flush函数将缓冲区数据立即写磁盘
查看>>
python 使用in判断不准确,in不好使
查看>>
Python 使用pandas 进行查询和统计详解
查看>>
Redis 配置文件redis.conf详细解释
查看>>
python网络爬虫(2)——scrapy框架的基础使用
查看>>
python网络爬虫实例教程试读_Python网络爬虫实战教程(全套完整版) - 学途无忧网 - 做技术的王者 - Powered By EduSoho...
查看>>
Python 使用哈希函数用于加密
查看>>
Python 依赖管理的革新——Poetry 深度解析
查看>>
python 保留精度及增加去除数字的千位分隔符(金额化数字)
查看>>
python 倒计时 9,8,7,。。。。。。0
查看>>
Python 入门开发学习笔记之数据的增删改查
查看>>
Python 入门教程(2)搭建环境 2.4、VSCode配置Node.js运行环境
查看>>
Python 八大排序算法合集
查看>>
python 关于epoll的学习
查看>>
Python 内存管理
查看>>
Python 内嵌函数:它们有什么用处?
查看>>