我有2个下拉列表,他们分别过滤内容。如果所选选项位于div中,则显示div。
如何使用它们一起过滤内容?我想要的就是让这两个下拉列表一起工作。他们目前正在过滤内容。因此,如果下拉列表1单独过滤内容ABCDE,下拉列表2过滤内容DEG,如果两者都被选中,则显示的内容应为DE
$(document).ready(function(){
$('#level').on('change', function() {
var val = $(this).val();
if ( val == '00'){
$(".textIc").show();
}else{
$('.textIc').each(function(){
if($(this).children("p").text().indexOf(val) !==-1){
$(this).show();
}else{
$(this).hide();
}
});
}
});
$('#type').on('change', function() {
var val = $(this).val();
if ( val == '000'){
$(".textIc").show();
}else{
$('.textIc').each(function(){
if($(this).children("p").text().indexOf(val) !==-1){
$(this).show();
}else{
$(this).hide();
}
});
}
});
});
div {
border: 1px solid black;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<select id="level">
<option value="00" selected><b>Default</b></option>
<option value="Primary">Primary</option>
<option value="Secondary">Secondary</option>
<option value="Primary and Secondary">Primary and Secondary</option>
</select>
<select id="type">
<option value="000" selected><b>Default</b></option>
<option value="King">King</option>
<option value="Queen">Queen</option>
</select>
<div class="textIc">
<p>Primary</p>
<p>King</p>
</div>
<div class="textIc">
<p>Secondary</p>
</div>
<div class="textIc">
<p>Primary and Secondary</p>
<p>King</p>
<p>bla bla bla bla</p>
</div>
<div class="textIc">
<p>Primary</p>
<p>Queen</p>
</div>
<div class="textIc">
<p>Secondary</p>
</div>
<div class="textIc">
<p>Primary and Secondary</p>
<p>King</p>
<p>bla bla bla bla</p>
</div>
Here是小提琴。
答案 0 :(得分:0)
以下是考虑这两个下拉列表的代码。
$(document).ready(function(){
$('#level').on('change', function() {
var val = $(this).val();
var typeVal = $('#type').val();
if ( val == '00'){
if(typeVal == '000'){
$(".textIc").show();
}else{
$('.textIc').each(function(){
if($(this).children("p").text().indexOf(typeVal)!==-1){
$(this).show();
}else{
$(this).hide();
}
});
}
}else{
$('.textIc').each(function(){
if($(this).children("p").text().indexOf(val) !==-1 && (typeVal=='000' || $(this).children("p").text().indexOf(typeVal)!==-1)){
$(this).show();
}else{
$(this).hide();
}
});
}
});
});
$(document).ready(function(){
$('#type').on('change', function() {
var val = $(this).val();
var levelVal = $('#level').val();
if ( val == '000'){
if(levelVal == '00'){
$(".textIc").show();
}else{
$('.textIc').each(function(){
if($(this).children("p").text().indexOf(levelVal)!==-1){
$(this).show();
}else{
$(this).hide();
}
});
}
}else{
$('.textIc').each(function(){
if($(this).children("p").text().indexOf(val) !==-1 && (levelVal=='00' || $(this).children("p").text().indexOf(levelVal)!==-1)){
$(this).show();
}else{
$(this).hide();
}
});
}
});
});
基本理念:
检查每个下拉列表的change
事件中的下拉值。
注意:可以重构上面的代码以减少if
语句的数量。使用.each()
循环遍历每个元素可以移出到单独的function()
。