Exemplo select JM

by Rafael Teles

HTML

<select id="stateSelect">
  <option value=""></option>
  <option value="schedule">schedule</option>
  <option value="running">running</option>
  <option value="completed">completed</option>
  <option value="all">all</option>
</select>

<hr/>

<table>
  <thead>
    <tr>
      <th>name</th>
      <th>date</th>
    </tr>
  </thead>
  <tbody id="tableContainer"></tbody>
</table>

JavaScript

var $tableBody = $("#tableContainer");
var tests = [
	{"name": "test1", "state": "schedule", "date": "01/01/2017"},
  {"name": "test2", "state": "running", "date": "02/01/2017"},
  {"name": "test2", "state": "schedule", "date": "03/01/2017"},
  {"name": "test1", "state": "running", "date": "04/01/2017"},
  {"name": "test3", "state": "schedule", "date": "05/01/2017"},
  {"name": "test1", "state": "completed", "date": "06/01/2017"}
];

$("#stateSelect").change(function () {
	$tableBody.empty();
  var state = $(this).val();

	var filteredTests = tests.filter(function (test) {
      return state === "all" || test.state === state;
    });
  
  filteredTests.forEach(function (test) {
  console.log(arguments);
  	$tableBody.append(
      $("<tr>").append(
        $("<td>", {text: test.name}),
        $("<td>", {text: test.date})
      )
    );
  });
})