下拉菜单联动
2016-02-15 09:40
681 查看
需求呢是这样的:有两个下拉菜单,一个是类型,一个是名称,一个类型包含多个名称。
jsp代码如下:
传过来的charts对象中是包含type和name的属性的,而类型中的值不是通过传charts对象,而是在后台实现去重后重新生成的一个对象。所以只需要符合以下条件即可实现两个下拉菜单的关联。
当选中类型菜单中的某个值时,charts对象的type与之匹配,则显示名称下拉框中相应的对象的名称,不匹配的就隐藏掉。
js代码如下:
我们通过给名称下拉菜单的option添加了一个group从而方便实现联动。
jsp代码如下:
<div class="toolbar pull-left"> 类型: <div style="display:inline-block;"> <select id="selectType" class="form-control"> <option value="please">请选择</option> <c:forEach items="${types}" var="t"> <option value="${t.type}">${t.type}</option> </c:forEach> </select> </div> </div> <div class="toolbar pull-left" style="margin-left:20px;"> 名称: <div style="display:inline-block;"> <select id="selectName" class="form-control"> <option value="please">请选择</option> <c:forEach items="${charts}" var="c"> <option value="${c.name}" class="cascadeNames" group="${c.type}">${c.name}</option> </c:forEach> </select> </div> </div>
传过来的charts对象中是包含type和name的属性的,而类型中的值不是通过传charts对象,而是在后台实现去重后重新生成的一个对象。所以只需要符合以下条件即可实现两个下拉菜单的关联。
当选中类型菜单中的某个值时,charts对象的type与之匹配,则显示名称下拉框中相应的对象的名称,不匹配的就隐藏掉。
js代码如下:
$('#selectType'< ac85 /span>).on('change', function(e) { _.each($('#selectName option'), function(v, k) { $(e.currentTarget).val() === $(v).attr("group") ? $(v).show() : $(v).hide(); }); });
我们通过给名称下拉菜单的option添加了一个group从而方便实现联动。
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- JSP/PHP基于Ajax的分页功能实现
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- 开发阶段Jetty运行Jsp报错且响应空白
- JavaScript 各种遍历方式详解
- 数组方法汇总
- 支持IE6 IE7 Firefox 的纯CSS的下拉菜单
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果