时间戳

首页 > 解决方案 > JQuery json.filter 两个条件

javascript - JQuery json.filter 两个条件

问题描述

我有一个需要根据“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>

标签： javascriptjqueryhtmlselect

解决方案

只需在过滤器中添加第二个条件以检查“模型”属性，例如：

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>

推荐阅读