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

青旅半醒 2022-08-22 14:29 142阅读 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 条评论，142人围观）

还没有评论，来说两句吧...

相关阅读

相关 js渲染select下拉列表数据

HTML（使用了layui） <div class="layui-form-item" style="margin-top: 15px" > ...

谁借莪１个温暖的怀抱￠/ 2024年04月18日 08:10/ 0 赞/ 34 阅读

相关 Mybatis + js 实现下拉列表二级联动

Mybatis + js 实现下拉列表二级联动学习内容：一、业务需求二、实现效果三、代

太过爱你忘了你带给我的痛/ 2022年10月06日 04:58/ 0 赞/ 210 阅读

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

Bootstrap的下拉列表实现了数据的下拉展示，效果不错。可以，如果是多个下拉列表，并且有级联关系，那么如何实现下拉列表数据的过滤呢？笔者通过简单的css过滤来实

青旅半醒/ 2022年08月22日 14:29/ 0 赞/ 143 阅读

相关最简单的鼠标悬停,实现下拉列表功能 bootstrap

<html> //最简单的鼠标悬停,实现下拉功能,应用bootstrap框架的知识,不会bootstrap自己百度怎么使用 <head>![SouthEast][]

Myth丶恋晨/ 2022年07月12日 07:59/ 0 赞/ 148 阅读

相关纯CSS实现下拉列表

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xh

向右看齐/ 2022年07月12日 06:40/ 0 赞/ 259 阅读

相关 bootstrap下拉

aria-label 正常情况下，form表单的input组件都有对应的label.当input组件获取到焦点时，屏幕阅读器会读出相应的label里的文本。如：

灰太狼/ 2022年06月04日 10:05/ 0 赞/ 164 阅读

相关 js下拉列表二级联动

学了JS也有一段时间了，今天把JS中较为重要的下拉列表二级联动记录一下。所谓二级联动，就是要通过一个下拉列表的选择从而在另一个select下拉列表中显示出对应的数据。好比我有

刺骨的言语ヽ痛彻心扉/ 2022年06月01日 04:41/ 0 赞/ 387 阅读

相关 js实现级联下拉列表

效果图： ![20190301193935424.png][]![20190301194000250.png][] HTML: <select class="

忘是亡心i/ 2022年03月15日 09:35/ 0 赞/ 346 阅读

相关 bootstrap -- css -- 文字、列表

文字 <small></small>：呈现小号字体效果。 <big></big>:程序大号字体效果 <abbr></abbr>: 标签指示简称或缩写。使用全局的 ti

柔光的暖阳◎/ 2021年12月16日 01:21/ 0 赞/ 281 阅读

相关 js如何实现下拉控制列表

js如何实现下拉控制列表重要属性介绍： ondblclick="selectOne()"：双击事件 select标签的属性： multiple="multiple"：

小灰灰/ 2020年06月03日 12:29/ 0 赞/ 687 阅读