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>