利用js和css实现Bootstrap下拉列表数据过滤-蒲公英云

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

青旅半醒 2022-08-22 14:29 216阅读 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());
    }
}