关闭

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

标签: bootstrap下拉解表-过滤
1453人阅读 评论(0) 收藏 举报
分类:

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

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:137209次
    • 积分:2118
    • 等级:
    • 排名:第17952名
    • 原创:70篇
    • 转载:1篇
    • 译文:5篇
    • 评论:117条
    文章分类
    最新评论