当前位置 主页 > 网站技术 > 代码类 > 最大化 缩小

    PHP之多条件混合筛选功能的实现方法

    栏目:代码类 时间:2019-10-09 21:06

    如下所示:

    <style type="text/css">
    
    .search_text{ overflow:hidden; height:100%; padding-top:5px; padding-bottom:5px;}
    .search_text h1{ color:#6a6a6a; font-weight:bold; float:left; font-size:14px; margin:0px; padding:0px;}
    .search_text ul{ margin:0; padding:0; list-style:none; float:left; overflow:hidden; height:100%;}
    .search_text li{ list-style:none; color:#6a6a6a; float:left; width:80px; padding-left:8px; padding-right:5px; white-space:nowrap}
    .search_text li a{ list-style:none; color:#6a6a6a;}
    .search_text li a:hover{ list-style:none; color:#fe8f01; font-weight:bold; text-decoration:underline;}
    .search_text li.selected{color:#fe8f01; font-weight:bold;}
    .search_text li.selected a{color:#fe8f01;}
    .search_text li.selected a:hover{color:#fe8f01;}
    </style>
    
    <div class="search_text" >
      <h1>生产年度:</h1>
      <ul>
       <li class="selected"><a href="javascript:goSort('year',0)" rel="external nofollow" >全部</a></li>
       <li><a href="javascript:goSort('year',1)" rel="external nofollow" >2015</a></li>
       <li><a href="javascript:goSort('year',2)" rel="external nofollow" >2014</a></li>
      </ul>
    </div>
    <div class="search_text" >
      <h1>棉花类型:</h1>
      <ul>
       <li class="selected"><a href="javascript:goSort('ctype',0);" rel="external nofollow" >全部</a> </li>
       <li><a href="javascript:goSort('ctype',1);" rel="external nofollow" >手采棉</a></li>
       <li><a href="javascript:goSort('ctype',2);" rel="external nofollow" >机采棉</a></li>
       </li>
      </ul>
    </div>
    <div class="search_text" >
      <h1>颜 色 级 :</h1>
      <ul>
       <li class="selected"><a href="javascript:goSort('colors',0);" rel="external nofollow" >全部</a> </li>
       <li><a href="javascript:goSort('colors',1);" rel="external nofollow" >白棉1级</a></li>
       <li><a href="javascript:goSort('colors',2);" rel="external nofollow" >白棉2级</a></li>
       <li><a href="javascript:goSort('colors',3);" rel="external nofollow" >白棉3级</a></li>
       <li><a href="javascript:goSort('colors',4);" rel="external nofollow" >白棉4级</a></li>
       <li><a href="javascript:goSort('colors',5);" rel="external nofollow" >白棉5级</a></li>
       <li><a href="javascript:goSort('colors',6);" rel="external nofollow" >淡点污棉1级</a></li>
      </ul>
    </div>
    <div class="search_text" >
      <h1>长 度 级 :</h1>
      <ul>
       <li class="selected"><a href="javascript:goSort('lengths',0);" rel="external nofollow" >全部</a> </li>
       <li><a href="javascript:goSort('lengths',1);" rel="external nofollow" >26CM</a></li>
       <li><a href="javascript:goSort('lengths',2);" rel="external nofollow" >27CM</a></li>
       <li><a href="javascript:goSort('lengths',3);" rel="external nofollow" >28CM</a></li>
       <li><a href="javascript:goSort('lengths',4);" rel="external nofollow" >29CM</a></li>
       <li><a href="javascript:goSort('lengths',5);" rel="external nofollow" >30CM</a></li>
       <li><a href="javascript:goSort('lengths',6);" rel="external nofollow" >31CM</a></li>
       <li><a href="javascript:goSort('lengths',7);" rel="external nofollow" >32CM</a></li>
      </ul>
    </div>
    <div class="search_text" >
      <h1>马克隆值:</h1>
      <ul>
       <li class="selected"><a href="javascript:goSort('micronaire',0);" rel="external nofollow" >全部</a> </li>
       <li><a href="javascript:goSort('micronaire',1);" rel="external nofollow" >C2</a></li>
       <li><a href="javascript:goSort('micronaire',2);" rel="external nofollow" >B2</a></li>
       <li><a href="javascript:goSort('micronaire',3);" rel="external nofollow" >A</a></li>
       <li><a href="javascript:goSort('micronaire',4);" rel="external nofollow" >B1</a></li>
       <li><a href="javascript:goSort('micronaire',5);" rel="external nofollow" >C1</a></li>
      </ul>
    </div>