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>
分享到:
相关推荐
jquery实现多余文字显示或隐藏
jquery实现隐藏和显示实例
一个漂亮的基于jQuery实现的点击后显示-隐藏无刷新登录框程序例子。
jQuery实现鼠标滑过图片显示隐藏标题效果源码.zip
jquery显示隐藏菜单实例jquery显示隐藏菜单实例
前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+...
jQuery隐藏显示密码插件 jQuery隐藏显示密码插件 jQuery隐藏显示密码插件
基于jquery插件实现的回到页面顶部功能,页面只需隐藏一个js文件即可,顶部按钮带有隐藏的功能,默认不显示隐藏按钮
jquery的部分隐藏效果,是先按钮的隐藏。可以用于菜单的下拉隐藏。非常有用
jQuery实现HTML元素隐藏和显示 让我们来模仿一下淘宝网当你搜索某个商品的时候,那种显示全部品牌和显示部分品牌的功能。 首先我们来理清一下思路: 1、一开始需要先隐藏需要隐藏的元素 2、你需要通过jquery...
jQuery密码显示隐藏登录表单
Demo 用jQuery实现最简单的滚屏效果2(加了上下按钮 ...Demo 用jQuery实现最简单的滚屏效果2(加了上下按钮Demo 用jQuery实现最简单的滚屏效果2(加了上下按钮Demo 用jQuery实现最简单的滚屏效果2(加了上下按钮
使用jQuery实现的效果,主要是调用js实现一些特效,有兴趣可以学习。。
利用jquery实现层的显示与隐藏效果。
NULL 博文链接:https://carey-pro.iteye.com/blog/1451881
jquery实现层的隐藏显示,很不错的资源,欢迎大家来下载学习。
jQuery实现表格动态修改和隐藏jQuery实现表格动态修改和隐藏jQuery实现表格动态修改和隐藏
Jquery实现简单TodoList
用jQuery实现的可隐藏显示的登陆框