php jquery ajax 多级联动菜单

最新推荐文章于 2023-03-14 15:06:27 发布

我是高手高手高高手

最新推荐文章于 2023-03-14 15:06:27 发布

阅读量2.3k

点赞数

分类专栏： php jQuery JS技巧 jQuery Mobile

本文链接：https://blog.csdn.net/haibo0668/article/details/53336756

版权

php 同时被 3 个专栏收录

445 篇文章 10 订阅

订阅专栏

JS技巧

244 篇文章 3 订阅

订阅专栏

jQuery

128 篇文章 1 订阅

订阅专栏

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

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 "";	
			}
		  
	}  


}  
  
?>

我是高手高手高高手

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
php jquery ajax 多级联动菜单

目前只做了三级,要四、五级的，要自己修改index.php代码<?php include("sunland_config.php");?>AJAX Demo // setTimeout('showLoader()', 100);//这里要延迟一下，直接调用无法显示加载器 //显示加载器.for jQuery Mobile 1.2.
复制链接

扫一扫