Mootools选择过滤
Mootools Select filtering
当我点击<select>
中的一个选项时,我想显示特定的<li>
元素:
<select>
<option value="f_chzn_g_0">Group One</option>
<option value="f_chzn_g_4">Group Two</option>
</select>
这是我的<li>
's,将被过滤,只显示选定的组。
<ul>
<li id="f_chzn_g_0" class="group-result">Group One</li>
<li id="f_chzn_o_1" class="active-result group-option" style="">one</li>
<li id="f_chzn_o_2" class="active-result group-option" style="">two</li>
<li id="f_chzn_o_3" class="active-result group-option" style="">three</li>
<li id="f_chzn_g_4" class="group-result">Group Two</li>
<li id="f_chzn_o_5" class="active-result group-option" style="">one</li>
<li id="f_chzn_o_6" class="active-result group-option" style="">two</li>
<li id="f_chzn_o_7" class="active-result group-option" style="">three</li>
</ul>
有人能帮我一下吗?这一切都必须在Mootools中。谢谢! 您只需要一个状态变量来跟踪您在迭代li
元素时是否在选定的组中。假设您通过添加active-result
类来显示li
元素,那么应该可以执行以下操作:
function showSelectedListItems(ulElem, selectedId) {
var inSelectedGroup = false;
ulElem.getElements('li').each(function(liElem) {
if (!inSelectedGroup) {
if (liElem.id == selectedId) inSelectedGroup = true;
}
else {
if (liElem.hasClass('group-result') inSelectedGroup = false;
else liElem.addClass('active-result');
}
});
});
相关文章:
- Angular:使用选择列表选择过滤代码中的对象
- 使用PHP通过HTML表单选项选择器过滤MYSQL结果
- gulpuncss正在过滤我的javascript所需的选择器
- 如何根据角度中的复选框选择过滤结果
- 仅当选择特定的选择选项时,才使用JavaScript过滤数组
- d3在鼠标悬停上过滤数据之后从选择中提取值
- 转换UL->li inot为同位素过滤菜单选择的列表
- 通过标签选择过滤平行网格
- 过滤具有2个选择列表的元素
- 如何使用jQuery过滤/克隆选择框选项
- Dojo Dgrid - 可以在过滤选择上编辑
- 使用 jQuery 过滤选择框
- jquery 使用过滤功能过滤选择
- 如何在devextreme中过滤选择框
- angular中唯一的过滤选择列表,只返回数据集中的单个项
- Dojo,过滤选择,查询和排除字符串
- 根据data-*属性过滤选择选项
- 使用jquery过滤选择框内容
- 在点击提交后,停止过滤选择框的重置
- JQuery移动版中的多个可过滤选择菜单