使用多个下拉列表隐藏DIV
使用多个下拉列表隐藏DIV
提问于 2020-05-08 23:45:58
我不太确定如何使用多个下拉菜单。我有一个在卡片中列出飞机的网页；我通过模拟器过滤这些卡片，它工作得很好，这是我的代码。
每个卡都有一个与之相关联的模拟器类型。它可以是任何'xp‘、'p3d’、'fsx‘的组合--因此我在java脚本中使用了'like’来隐藏没有某种组合的卡片。
<div class="aircraft col-md-6 col-lg-4" data-simulatortype="###">
下面是我的JavaScript，它接受下拉列表中的输入。
$( ".simulator-type-select" ).change(function() {
var selectedSimulatorType = this.options[this.selectedIndex].value;
var count = $('.aircraft[data-simulatortype*="' + selectedSimulatorType + '"]').length;
if (selectedSimulatorType == "all") {
$('.aircraft').removeClass('hidden');
$('.aircraft-notavailable').addClass('hidden');
} else if (count == "0") {
$('.aircraft-notavailable').removeClass('hidden');
$('.aircraft').addClass('hidden');
} else {
$('.aircraft-notavailable').addClass('hidden');
$('.aircraft').addClass('hidden');
$('.aircraft[data-simulatortype*="' + selectedSimulatorType + '"]').removeClass('hidden');
}
});现在我想添加一个值为'cargo‘'scheduled’'charter‘的下拉列表。
除了模拟器类型之外，我还打算在每个div中添加以下内容。
<div class="aircraft col-md-6 col-lg-4" data-simulatortype="###" data-flighttype="###">
我试过这段代码，但我不能让它接受下拉列表中的任何一个。我的目标是让下拉菜单做一些事情；你可以选择模拟器类型，然后选择飞行类型，或者反之亦然。
var simulator = $('.simulator-type-select');
var ops = $('.flightops-type-select');
var count = $('.aircraft[data-simulatortype*="' + simulator.val() + '"]').length;
if (simulator.prop('value') == "all" || ops.prop('value') == "all" ) {
$('.aircraft').removeClass('hidden');
$('.aircraft-notavailable').addClass('hidden');
}
if (simulator.prop('selectedIndex') > 0 || ops.prop('selectedIndex') > 0 ) {
$('.aircraft-notavailable').addClass('hidden');
$('.aircraft').addClass('hidden');
$('.aircraft').filter('[data-simulatortype*="' + simulator.val() + '"][data-flightopstype="' + ops.val() + '"]').removeClass('hidden');
} else {
$('.aircraft-notavailable').removeClass('hidden');
}
});.aircraft就是我抓取的DIV
如果计数=0，则.aircraft-notavailable是我显示的DIV值；这意味着没有基于过滤器请求的选项。
回答 1
Stack Overflow用户
发布于 2020-05-09 01:19:39
在遇到类似的问题后，我想通了。
$("select.filter-type-select").change(function(){
var filters = $.map($("select.filter-type-select").toArray(), function(e){
return $(e).val();
}).join(".");
$("div#filter-container").find("div#aircraft").hide();
$("div#filter-container").find("div." + filters).show();
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61682887
复制相关文章
相似问题
腾讯云开发者
