我有4个下拉选项是select标签。当我从第一个下拉菜单中选择一个选项时,一些div将隐藏。问题是如果我从第二个下拉列表中选择一个选项,其他div将仅基于第二个规则隐藏。但我也想尊重第一条规则。
例如。我的数据库中的每个项目都有一个重复的div。首先下拉有3个严重性选项。次要,中等和主要。如果我选择Major,那么现在只显示Major项目而其他项目被隐藏。第二个选择标记过滤项目类型。如果我将第一个过滤器保留为Major,当我为第二个选择选择一个选项时,div将显示/隐藏仅尊重第二个规则。但我想结合选择的规则。
<select id="chooseSeverity">
<option>Choose Severity</option>
<%
for (int i = 0; i < countBySeverity.size(); i++) {
%>
<option value="<%=countBySeverityColumn.get(i)%>"><%=countBySeverityColumn.get(i)%></option>
<%
}
%>
</select> <select id="chooseType">
<option>Choose Type</option>
<%
for (int i = 0; i < countByType.size(); i++) {
%>
<option value="<%=countByTypeColumn.get(i)%>"><%=countByTypeColumn.get(i)%></option>
<%
}
%>
</select>
这是我的四个选择中的两个。这些是我的jQuery规则。
$("#chooseSeverity").change(function(){
$(this).find("option:selected").each(function(){
var optionValue = $(this).attr("value");
if(optionValue){
var val = optionValue;
$(".status").each(function() {
var parent = $(this).parents('.style2'),
length = $(this).text().length > 0;
if (length && $(this).text().search(new RegExp(val, "i")) < 0) {
parent.fadeOut("slow");
} else {
parent.show();
}
});
}
else{
$(".status").each(function() {
var parent = $(this).parents('.style2');
parent.fadeIn("slow");
});
}
});
});
$("#chooseType").change(function(){
$(this).find("option:selected").each(function(){
var optionValue = $(this).attr("value");
if(optionValue){
var val = optionValue;
$(".savingType").each(function() {
var parent = $(this).parents('.style2'),
length = $(this).text().length > 0;
if (length && $(this).text().search(new RegExp(val, "i")) < 0) {
parent.fadeOut("slow");
} else {
parent.show();
}
});
}
else{
$(".savingType").each(function() {
var parent = $(this).parents('.style2');
parent.fadeIn("slow");
});
}
});
});
如何结合所有规则?
感谢。
PS:这是最小的小提琴:https://jsfiddle.net/zjho75jp/1/