Question

我有一个选择列表，需要根据“ sa_mb”和“模型”进行过滤，但是我似乎无法过滤所需的两个条件。每当我选择模型A时，都会出现select_list SA，DESTINATION_A和CRITERIA_A。如果用户选择型号A和MB，则不应显示结果。

$(document).ready(function() {
  var json = [{
      "sa_mb": "SA",
      "Model": "A",
      "Destination": "DESTINATION_A",
      "Criteria": "CRITERIA_A",
    },
    {
      "sa_mb": "MB",
      "Model": "B",
      "Destination": "DESTINATION_B",
      "Criteria": "CRITERIA_B",
    }
  ];


  $("#SELECT_LIST").on("change", () => {
    $("table").html(`<tr>
							<th>MODEL</th>
							<th>DESTINATION</th>
							<th>CRITERIA</th>
							</tr>`);
    var matchJSON = json.filter(e => e["sa_mb"].toLowerCase() == $("#SELECT_LIST").val().toLowerCase());
    matchJSON.forEach(obj => $("table").append(`<tr><td>${obj["Model"]}</td>
														<td>${obj["Destination"]}</td>
														<td>${obj["Criteria"]}</td>
														</tr>`));
  });
});

<!DOCTYPE html>
<html>

<head>

  <meta charset="utf-8">
  <meta destination="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel=\ "stylesheet\" href=\ "https://fonts.googleapis.com/icon?family=Material+Icons\">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <label for="model"><b>MODEL: </b></label>
  <select ID="MODEL" NAME="MODEL" required>
    <option value="" selected="selected">Select Model...</option>
    <option value="A"> A </option>
    <option value="B"> B </option>
  </select>

  <label for="SELECT_LIST"><b> SELECT_LIST: </b></label>
  <select id="SELECT_LIST" name="SELECT_LIST" required>
    <option value="Select Material Type..." selected="selected"> --Select Material Type-- </option>
    <option value="SA"> SA </option>
    <option value="MB"> MB </option>
  </select>


  <table id="bod">
    <tr>
      <th>MODEL</th>
      <th>DESTINATION</th>
      <th>CRITERIA</th>
    </tr>
  </table>

</html>

Answer 1

只需在过滤器中添加第二个条件，即可检查“ Model”属性，就像这样：

var matchJSON = json.filter((e) => {
     return e["sa_mb"].toLowerCase() == $("#SELECT_LIST").val().toLowerCase() && 
            e["Model"].toLowerCase() == $("#MODEL").val().toLowerCase();
});

注意：最好像在提供的工作示例中一样，将事件附加到两个列表中。

$(document).ready(function() {
  var json = [{
      "sa_mb": "SA",
      "Model": "A",
      "Destination": "DESTINATION_A",
      "Criteria": "CRITERIA_A",
    },
    {
      "sa_mb": "MB",
      "Model": "B",
      "Destination": "DESTINATION_B",
      "Criteria": "CRITERIA_B",
    }
  ];


  $("#SELECT_LIST, #MODEL").on("change", () => {
    $("table").html(`<tr>
            <th>MODEL</th>
            <th>DESTINATION</th>
            <th>CRITERIA</th>
            </tr>`);
            
    var matchJSON = json.filter((e) => {
      return e["sa_mb"].toLowerCase() == $("#SELECT_LIST").val().toLowerCase() && e["Model"].toLowerCase() == $("#MODEL").val().toLowerCase();
    });
    
    matchJSON.forEach(obj => $("table").append(`<tr><td>${obj["Model"]}</td>
                          <td>${obj["Destination"]}</td>
                          <td>${obj["Criteria"]}</td>
                          </tr>`));
  });
});

<!DOCTYPE html>
<html>

<head>

  <meta charset="utf-8">
  <meta destination="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel=\ "stylesheet\" href=\ "https://fonts.googleapis.com/icon?family=Material+Icons\">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <label for="model"><b>MODEL: </b></label>
  <select ID="MODEL" NAME="MODEL" required>
    <option value="" selected="selected">Select Model...</option>
    <option value="A"> A </option>
    <option value="B"> B </option>
  </select>

  <label for="SELECT_LIST"><b> SELECT_LIST: </b></label>
  <select id="SELECT_LIST" name="SELECT_LIST" required>
    <option value="Select Material Type..." selected="selected"> --Select Material Type-- </option>
    <option value="SA"> SA </option>
    <option value="MB"> MB </option>
  </select>


  <table id="bod">
    <tr>
      <th>MODEL</th>
      <th>DESTINATION</th>
      <th>CRITERIA</th>
    </tr>
  </table>

</html>

Answer 2

尝试这样的过滤方法：

$(document).ready(function() {
    var json = [{
        "sa_mb": "SA",
        "Model": "A",
        "Destination": "DESTINATION_A",
        "Criteria": "CRITERIA_A",
    }, {
        "sa_mb": "MB",
        "Model": "B",
        "Destination": "DESTINATION_B",
        "Criteria": "CRITERIA_B",
    }];


    $("#SELECT_LIST").on("change", () => {
        $("table").html(`<tr>
                            <th>MODEL</th>
                            <th>DESTINATION</th>
                            <th>CRITERIA</th>
                            </tr>`);
        var matchJSON = json.filter(function(v){
            if(v.sa_mb.toLowerCase() == $("#SELECT_LIST").val().toLowerCase() && v.Model.toLowerCase() == $("#MODEL").val().toLowerCase()){
                return v;
            }
        });
        matchJSON.forEach(obj => $("table").append(`<tr><td>${obj["Model"]}</td>
                                                        <td>${obj["Destination"]}</td>
                                                        <td>${obj["Criteria"]}</td>
                                                        </tr>`));
    });
});

jQuery json.filter两个条件

2 个答案: