利用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;
}

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

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

之前用Easyui框架下做的下拉框选择,虽然可以搜索,但是有诸多的不便:比如,不能模糊匹配,必须按照第一个字母来搜索 心血来潮,想换个框架写后台,然后用Bootstrap搭了个架子,然后两种样...
  • xb12369
  • xb12369
  • 2016年03月28日 17:03
  • 45424

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

JS表格组件神器bootstrap table详解(基础版)

一、Bootstrap Table的引入 关于Bootstrap Table的引入,一般来说还是两种方法: 1、直接下载源码,添加到项目里面来。 由于Bootstrap Table是...
  • killcwd
  • killcwd
  • 2016年03月26日 09:35
  • 3049

使用bootstrap实现下拉框搜索功能

背景公司的小二后台有一个下拉框选择经销商的功能,由于选择的经销商过多,因此添加搜索功能。前提配置好Bootstrap相关的开发环境主要内容 经销商信息 ...

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

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

C# 线程中使用Timer,并向其触发的事件(函数)中传递参数

C#中的三个Timer我就不作说明了,这里要说的是如果你在线程中使用Timer,是不能使用System.Windows.Forms.Timer的,微软的注释很明确:“实现按用户定义的时间间隔引发事件的...

ajax动态更新下拉列表

前面做了一个ajax的小demo,今天看一个动态更新下拉列表,或者也叫级联更新下拉列表,这个也是利用ajax的异步调用去后台实现数据请求,然后回到前台完成下拉列表数据的更新,以增强web应用的交互性。...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:利用js和css实现Bootstrap下拉列表数据过滤
举报原因:
原因补充:

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