如何使用jQuery处理多个选择标签?

时间:2017-05-23 13:44:26

标签: javascript jquery html css

我有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/

1 个答案:

答案 0 :(得分:0)

Getting Select List Values

np.geomspace(max(a[0], b[0]), 1)[0]