ecshop详情页商品三级联动搜索

最新推荐文章于 2022-03-01 10:05:40 发布

胡德咏

最新推荐文章于 2022-03-01 10:05:40 发布

阅读量3k

点赞数

本文链接：https://blog.csdn.net/u010620626/article/details/26451123

版权

1.在index.php添加

//三级联动 传递厂商名列表 begin
    $sql_cs="select distinct(attr_value) from ".$GLOBALS['ecs']->table('goods_attr')."where attr_id=11";//所有厂商  缩写cs
    $row_cs=$GLOBALS['db']->getAll($sql_cs);
    $smarty->assign('changshang',$row_cs);
    //三级联动 end

向模板页传参

2.在category_tree.lbi下方添加

<div class="zhss-xg2 cf">
<table width="1000px" border="0" cellpadding="0" cellspacing="1" bgcolor="#deddde">
<tr>
<td bgcolor="#dfdddd" valign="middle" width="192" class="cat_tree_title">
按车型搜索</td>
<td bgcolor="#dfdddd" valign="middle" width="808" class="cat_tree_child">
    
<select style="height: 25px;border: 1px solid #DBD9D9;margin-top: 8px;display: inline;" name="choose1" οnchange='loadXMLDoc_cm()' id='cs'>
    <option value='0'>--厂 商-- </option>
    <!-- {foreach from=$changshang item=cs } -->
  <option value='1'>{$cs[attr_value]}</option>
  <!--{/foreach}-->
</select>    

<select style="height: 25px;border: 1px solid #DBD9D9;margin-top: 8px;display: inline;" name="choose2" id='cm' οnchange='loadXMLDoc_cx()'>
    <option value='0'>--车 名--</option>
</select>    

<select style="height: 25px;border: 1px solid #DBD9D9;margin-top: 8px;display: inline;" name="choose3" id='cx'>
    <option value='0'>--车 型--</option>
</select>   
<input name="" type="button" style="width: 64px;  height: 25px;  background: none repeat scroll 0% 0% #275D8A; text-align: center;line-height: 25px;    color: #FFF;    cursor: pointer;    margin-left: 20px;    display: inline;" value="搜索" οnclick='my_ld_search()'>
</td>
</tr>
</table>
</div>

此时效果图：

3.接下来处理ajax请求车名车型的联动

在common.js中添加

//联动搜索 begin
 function my_ld_search(){
   var keyword='';
            var selectIndex_cx_index = document.getElementById("cx").selectedIndex;//获得是第几个被选中了
            var selectText_cx_value= document.getElementById("cx").options[selectIndex_cx_index].value //获得被选中的项目的文本
            var selectText_cx_text= document.getElementById("cx").options[selectIndex_cx_index].text;

            var selectIndex_cm_index = document.getElementById("cm").selectedIndex;//获得是第几个被选中了
            var selectText_cm_value= document.getElementById("cm").options[selectIndex_cm_index].value //获得被选中的项目的文本
            var selectText_cm_text= document.getElementById("cm").options[selectIndex_cm_index].text;

            var selectIndex_cs_index = document.getElementById("cs").selectedIndex;//获得是第几个被选中了
            var selectText_cs_value= document.getElementById("cs").options[selectIndex_cs_index].value //获得被选中的项目的文本
            var selectText_cs_text= document.getElementById("cs").options[selectIndex_cs_index].text;
            if(selectText_cx_value!=0){
                  keyword=selectText_cx_text;
            }else if(selectText_cm_value!=0){
                 keyword=selectText_cm_text;
            }else if(selectText_cs_value!=0){
                 keyword=selectText_cs_text;
            }
            
            document.getElementById('keyword').value=keyword;
            document.getElementById('searchForm').submit();
 }
function loadXMLDoc_cx()
{
   var selectIndex2 = document.getElementById("cm").selectedIndex;//获得是第几个被选中了
            var selectText2= document.getElementById("cm").options[selectIndex2].text //获得被选中的项目的文本
            
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      var d=xmlhttp.responseText;
     
     document.getElementById("cx").options.length=0; 
     document.getElementById("cx").options.add(new Option('-车型-',0)); 
                                     
                                    var str=d.split(',');
                                    for(var i=0;i<str.length;i++){
                                      document.getElementById("cx").options.add(new Option(str[i],1));
                                         // $("#cx").append("<option value='1'>"+str[i]+"</option>");
                                    }
    }
  }
xmlhttp.open("GET","liandongchildren.php?selectText2="+selectText2,true);
xmlhttp.send();
}
function loadXMLDoc_cm()
{
  var selectIndex_cs_index = document.getElementById("cs").selectedIndex;//获得是第几个被选中了
            var selectText_cs_value= document.getElementById("cs").options[selectIndex_cs_index].value //获得被选中的项目的文本
            var selectText_cs_text= document.getElementById("cs").options[selectIndex_cs_index].text;
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      var d=xmlhttp.responseText;
     
     document.getElementById("cm").options.length=0; 
     document.getElementById("cm").options.add(new Option('-车名-',0)); 
                                     
                                    var str=d.split(',');
                                    for(var i=0;i<str.length;i++){
                                      document.getElementById("cm").options.add(new Option(str[i],1));
                                         // $("#cx").append("<option value='1'>"+str[i]+"</option>");
                                    }
    }
  }
xmlhttp.open("GET","liandongchildren.php?selectText="+selectText_cs_text,true);
xmlhttp.send();
}
//联动搜索 end

上面是ajax请求与响应接下来添加处理请求的页面liandongchildred.php在根目录

<?php
	
	 $con=mysql_connect('localhost','admin','admin');
      mysql_query('set names utf8');
      mysql_select_db('shop');
if(!empty($_GET['selectText'])){//厂商
	 $sql_goods_id_list="select goods_id from shop_goods_attr where attr_id=11 and attr_value='".$_GET['selectText']."'";//选中厂商对应的goods_id  根据goods_id提取厂名 
       
       $query_goods_id_list=mysql_query($sql_goods_id_list);
       $goods_id_arr='(';
    while($goods_id_list=mysql_fetch_assoc($query_goods_id_list)){
    	$goods_id_arr.="'".$goods_id_list['goods_id']."',";
    }
    $goods_id_arr=trim($goods_id_arr,',');
  	$goods_id_arr.=")";
	$sql_cm="select distinct(attr_value) from  shop_goods_attr where attr_id=1 and goods_id in ".$goods_id_arr;
	$cm_arr='';
	$query_cm=mysql_query($sql_cm);
	while($row_cm=mysql_fetch_assoc($query_cm)){
	$cm_arr.=$row_cm['attr_value'].",";
	}
	$cm_arr=trim($cm_arr,',');
	print_r($cm_arr);
}elseif (!empty($_GET['selectText2'])) {//车型
	 $sql_goods_id_list="select goods_id from shop_goods_attr where attr_id=1 and attr_value='".$_GET['selectText2']."'";//选中厂商对应的goods_id  根据goods_id提取厂名 
       $query_goods_id_list=mysql_query($sql_goods_id_list);
       $goods_id_arr='(';
    while($goods_id_list=mysql_fetch_assoc($query_goods_id_list)){
    	$goods_id_arr.="'".$goods_id_list['goods_id']."',";
    }
    $goods_id_arr=trim($goods_id_arr,',');
  	$goods_id_arr.=")";
	$sql_cm="select distinct(attr_value) from  shop_goods_attr where attr_id=9 and goods_id in ".$goods_id_arr;
	$cx_arr='';
	$query_cm=mysql_query($sql_cm);
	while($row_cm=mysql_fetch_assoc($query_cm)){
	$cx_arr.=$row_cm['attr_value'].",";
	}
	$cx_arr=trim($cx_arr,',');
	print_r($cx_arr);
}
      
	
?>

4.在search.php页也添加这段

//三级联动 传递厂商名列表 begin
    $sql_cs="select distinct(attr_value) from ".$GLOBALS['ecs']->table('goods_attr')."where attr_id=11";//所有厂商  缩写cs
    $row_cs=$GLOBALS['db']->getAll($sql_cs);
    $smarty->assign('changshang',$row_cs);
    //三级联动 end

完。