根据多个下拉值

时间:2017-03-16 15:36:56

标签: javascript jquery drop-down-menu

请指导我如何更好地制作此代码。

var employees_json = [
    {"id":"1","departments_id":"1","designations_id":"1","employee_types_id":"1","name":"name1"},
{"id":"2","departments_id":"2","designations_id":"2","employee_types_id":"1","name":"name2"},
    {"id":"3","departments_id":"3","designations_id":"3","employee_types_id":"2","name":"name3"},
    {"id":"4","departments_id":"4","designations_id":"4","employee_types_id":"3","name":"name4"},
    {"id":"5","departments_id":"5","designations_id":"5","employee_types_id":"3","name":"name5"}
];

$("._employee_selection").change(function() {
  update_employees();
});

function update_employees() {
  var departments_id = $('#departments_id').val();
  var designations_id = $('#designations_id').val();
  var employee_types_id = $('#employee_types_id').val();

  options = '<option value="">Select an option</option>';
  $.each(employees_json, function(index, val) {
    var selection = 0;

    if (departments_id == '' || val.departments_id == departments_id) {
      selection += 1;
    }
    if (designations_id == '' || val.designations_id == designations_id) {
      selection += 1;
    }
    if (employee_types_id == '' || val.employee_types_id == employee_types_id) {
      selection += 1;
    }

    if (selection == 3) {
      options += `<option value="${val.id}">${val.name}</option>`;
    }
  });

  $("#employees_id").html(options);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<select id="departments_id" class="_employee_selection">
<option value="" selected="selected">Select an option</option>
<option value="1">Administration</option>
<option value="2">Data Entry</option>
<option value="3">Development</option>
<option value="4">Management</option>
<option value="5">Marketing</option>
</select>

<select id="designations_id" class="_employee_selection">
<option value="" selected="selected">Select an option</option>
<option value="1">Administration</option>
<option value="2">Data Entry</option>
<option value="3">Development</option>
<option value="4">Management</option>
<option value="5">Marketing</option>
</select>

<select id="employee_types_id" class="_employee_selection">
<option value="" selected="selected">Select an option</option>
<option value="1">Permanent</option>
<option value="2">contract</option>
<option value="3">Probation</option>
</select>

<select id="employees_id">
</select>

在多个下拉选项的基础上填充下拉列表的更好方法是什么?

这基本上是一个搜索过滤器,我没有使用Ajax从过滤后的下拉列表中获取数据。

我有一个json数组的员工,他们的部门,名称和类型都在数组中。

从任意组合中选择的下拉列表中,我正在尝试填充员工列表。

以下代码对我有用,但我希望能有一种简单易用的方法,我不确定如何更有效地完成这项工作。

0 个答案:

没有答案