用Jquery兑现按照你的需求进行显示隐藏（超级简单）

用Jquery实现按照你的需求进行显示隐藏（超级简单）

1. 首先你需要导入Jquery的包，
<script src="你下载的jquery包的本机地址" type="text/javascript"></script>

<select name="promotion" id="proId">   <!-- 这里请注意：你设置的value值必须保证与下面span中的value值保持一致 以下使用了jstl标签--> 
     <option value="0">所有促销产品</option>
     <option value="2">图片促销</option>
     <option value="1">文字促销</option>
</select>
<table>
<tr>
<th>类型</th>
<th>标题</th>
<th>链接地址</th>
</tr>
    <c:forEach items="${promotions}" var="promotionBean">
     <tr>
     <td>
     <c:choose>
     <c:when test="${promotionBean.promotionType eq 2}"><span value="2">图片促销</span></c:when>
     <c:when test="${promotionBean.promotionType eq 1}"><span value="1">文字促销</span></c:when>
     <c:otherwise>非促销产品</c:otherwise>
     </c:choose>
     </td>
     <td>${promotionBean.title}</td>
     <td>${promotionBean.linkUrl}</td>
</tr>
</c:foreach>
</table>

 

以下是Jquery代码，

<script type="text/javascript">
<![CDATA[
$(document).ready(function(){
//proId是<select name="promotion" id="proId"> 的id值 
$("#proId").change(function(){
        //获取你想要显示的促销产品的value值 
           var value = $(this).val();
       //遍历从第二个tr开始的所有tr（第一个tr是表头） 
           $("tr:gt(0)").each(function(){【这个地方容易忽视】 
      //查询tr中第一个td的中span的value属性的值 
          var textValue = $(this).find("td:first span").attr("value");      
        //如果你选择的是全部促销产品(<option value="0">),则全部tr都显示 
         if(value == 0){
                   $(this).show();
           }else if(textValue == value){
           //如果两值相同，说明选择的是文字或者图片促销产品  进行显示， 
                 $(this).show();
              }else{
                //如果两值不相等，说明该促销产品不是需要显示的    则隐藏 
                    $(this).hide();
             }
             });
         }); 
    });
]]>
</script>