利用js和css实现Bootstrap下拉列表数据过滤

原创 2016年05月31日 16:03:49

Bootstrap的下拉列表实现了数据的下拉展示,效果不错。
可以,如果是多个下拉列表,并且有级联关系,那么如何实现下拉列表数据的过滤呢?
笔者通过简单的css过滤来实现数据的过滤,免除了数据需要异步加载数据。笔者采用的方式是:


通过jquery的选择器选择没有隐藏的列表,设置为隐藏,再选择当前选择省份相关城市的列表,删除隐藏样式。


比如:加载省份,城市数据。
假设下拉列表数据通过jsp或者javascript的模板生成了li的下拉列表数据,我们在省份列表中,每一项添加一个javascript函数,参数为省份代码,城市列表中添加一个省份代码的列样式,代码如下:

<c:forEach items="${lstProvinces}" var="province" varStatus="status">
    <li><a href="javascript:loadCityList(${province.code});">${province.name}</a></li>
</c:forEach>
<c:forEach items="${lstCities}" var="city" varStatus="status">
    <li class="city-item province-${city.province}"><a href="${city.id}">${city.name}</a></li>
</c:forEach>

选择省份,过滤城市的方法实现代码如下:

function loadCityList(code){
    if (code== -1){
        $('.city-item').removeClass('hidden');
        $("#province-btn").html('所有');
    }else{
        $(".city-item:not('.hidden')").addClass('hidden');
        $("province-"+code).removeClass('hidden');
        $("#province-btn").html($(".province-"+code).html());
    }
}

需要的css:
.hidden{
display:none;
}

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

50个极好的bootstrap 后台框架主题下载

50个极好的bootstrap 后台框架主题下载  http://sudasuta.com/bootstrap-admin-templates.html 越来越多的设计师和前端工程...

bootstrap-suggest-plugin (bsSuggest) 联想搜索插件之——中文字符在IE下POST 时乱码现象解决方案

bootstrap-suggest-plugin (bsSuggest) 联想搜索插件之——中文字符在IE下POST到后台 时乱码现象 解决方案

Bootstrap Search Suggest 插件使用

Bootstrap 搜索建议插件 bootstrap combox 搜索建议插件 这是一个基于 boo...

第3.1.4章 WEB系统最佳实践 js控件之bootstrap-suggest-plugin

bootstrap-suggest-plugin插件地址,这是一个简单的编辑提示控件 bootstrap-suggest-plugin demo地址 页面如下面所示,使用此控件 ...
  • warrah
  • warrah
  • 2016-12-11 14:35
  • 2327

bootstrap bssuggest

原文链接:http://blog.csdn.net/leeyue_1982/article/details/48950123# >  html lang="zh-cn">    head>...

Bootstrap Search Suggest 使用的例子

Bootstrap Search Suggest 官方说明文档如下:suggest说明文档 由于该文档没有详细说明怎么运用到实际的项目中,特别是怎么将数据库中的值显示到页面上,所以我再运用到项目中,...

原生js实现对select下拉列表的内容过滤

原生js实现对select下拉列表的内容过滤 场景描述: 笔者在工作的过程中,经常碰到这样的业务场景。客户要求一个下拉列表框旁边要有一个输入过滤的功能:如下图所示 由于在一...

angularJS自定义过滤器筛选列表/下拉框

angularJS过滤器实现筛选列表/下拉框项目中有时会有这样的需求:用input输入框实现对select下拉框或者一个列表的筛选功能。(这是作者写的一个小demo,请忽略样式) 筛选的结果: ...

bootstrap框架下下拉框select搜索功能

之前用Easyui框架下做的下拉框选择,虽然可以搜索,但是有诸多的不便:比如,不能模糊匹配,必须按照第一个字母来搜索 心血来潮,想换个框架写后台,然后用Bootstrap搭了个架子,然后两种样...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)