三级联动产品分类查询

本文介绍了如何实现三级联动的产品分类查询,通过这种方式能够高效地根据分类查找相应的产品信息。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


ProductAction

public function index(){
    $tid = I("get.tid");
    if($tid==""){
        $tid=1;//$tid = M("Proclass")->where(array('pid'=>1,'lang'=>0))->order("orderby asc")->getField("id");
    }
    $id = I("get.id");
    if($id!=''){
        $tid=$id;
    }
    
    //产品列表
    $pro_data = $this->getPro($tid,$this->lang,0,1,1,9);
}

$this->assign("pro_data",$pro_data);

$this->display();

}

public function checkfirstid(){
    $first_id = I('first_id');
    $count = M('Proclass')->where(array('pid'=>$first_id))->count();
    $res=array();
    if($count>0){
        $res['status']=1;
        $res['proj'] = M('Proclass')->where(array('pid'=>$first_id))->field('id,proclassname')->select();

    }else{
        $res['status']=0;
        $res['proj']=M('Product')->where(array('cid'=>$firstId))->order('orderby asc')->select();

    }

    $this -> ajaxReturn($res);

}

public function firstclass(){
    $firstId=I('first_id');
    $proj=M('Product')
        ->where(array('cid'=>$firstId))
        ->order('orderby asc')
        ->select();
        foreach($proj as $k=>$v){
            echo '<div class="pro wow animated fadeIn" data-wow-duration="2s" data-wow-delay="0.3s">';
            echo '<div class="pro-img col-md-4"><img src="http://localhost/tailun/web/Public/Uploads/Product/'.$v[prophoto].'"/></div>';
            echo '<div class="pro-info col-md-5">';
            echo '<h5>'.$v[proname].'</h5>';
            echo '<p>'.$v[procontent].'</p>';
            echo '</div>';
            echo '<div class="col-md-3 read"><a href="http://localhost/tailun/web/Product/proinfo/id/'.$v[id].'.html" class="more">点击浏览详细参数</a></div>';
            echo '<div class="clear"></div>';
            echo '</div>';
        }   


}

public function  secondclass(){
    $secondId=I('second_id');
    $proj=M('Product')
        ->where(array('cid'=>$secondId))
        ->order('orderby asc')
        ->select();
        foreach($proj as $k=>$v){
            echo '<div class="pro wow animated fadeIn" data-wow-duration="2s" data-wow-delay="0.3s">';
            echo '<div class="pro-img col-md-4"><img src="http://localhost/tailun/web/Public/Uploads/Product/'.$v[prophoto].'"/></div>';
            echo '<div class="pro-info col-md-5">';
            echo '<h5>'.$v[proname].'</h5>';
            echo '<p>'.$v[procontent].'</p>';
            echo '</div>';
            echo '<div class="col-md-3 read"><a href="http://localhost/tailun/web/Product/proinfo/id/'.$v[id].'.html" class="more">点击浏览详细参数</a></div>';
            echo '<div class="clear"></div>';
            echo '</div>';
        }            

}

index.php

<!--产品分类-->
<div class="pro-class-wrap">
	<div class="container pro-class">
		<i></i>
		<select name="first" id="first">
			<option value="0">请选择分类</option>
			<volist name="cate" id="vo">
				<option value="<{$vo.id}>"><{$vo.proclassname}></option>			
			</volist>
		</select>
<!-- 				<select name="second" id="second">
			<option value="">请选择子分类</option>
		</select> -->
	</div>
</div>
<script>
    $('#first').change(function(){
   	    var first_id = $(this).val(),
   	        _this = $(this);
   	    if(first_id>=1){
	   	    $.get(
	   	    	'__URL__/checkfirstid',
					{'first_id' : first_id},
					function(data){
						// alert(data.status);
						if(data.status==1){
							_this.next('select').remove();
							var option = '';
							$.each(data.proj,function(k,v){
								option += "<option value="+v.id+">"+v.proclassname+"</option>";
							});
							_this.next('select').remove().end().after("<select name='second' id='second'><option value=''>请选择子分类</option>"+option+"</select>");
							second();

						}else if(data.status==0){
							_this.next('select').remove();
							first_a(first_id);
						}
					},'JSON'
	   	    	);
   	    }else{
   	    	parent.location.reload();
   	    }


    });

	function first_a(first_id){
		var first_id = first_id;
		$.get(
			'__URL__/firstclass',
			{'first_id' : first_id},
			function(data){
				$('#container').html(data);
			},'HTML'
		);

	}

	function second(){
		$('#second').change(function(){
			var second_id = $(this).val();
			$.get(
				'__URL__/secondclass',
				{'second_id' : second_id},
				function(data){
					$('#container').html(data);
				},'HTML'
			);


		});	
	}

</script>

<!--products-->
<div class="pro-wrap container" id="container">
	<volist name="pro_data" id="vo">
		<div class="pro wow animated fadeIn" data-wow-duration="2s" data-wow-delay="0.3s">
			<div class="pro-img col-md-4"><img src="__PUBLIC__/Uploads/Product/<{$vo.prophoto}>"/></div>
			<div class="pro-info col-md-5">
				<h5><{$vo.proname}></h5>
				<{$vo.procontent}>
			</div>
			<div class="col-md-3 read"><a href="<{:U('Product/proinfo',array('id'=>$vo[id]))}>" class="more">点击浏览详细参数</a></div>
			<div class="clear"></div>
		</div>
	</volist>
	<div class="page">
		<{$page}>
	</div>
</div>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值