Question

我想比较关联数组中的值，并想打印通过HTML选择的人的头部

我的数组看起来像

var employee=[{"firstName":"Zahir","lastName":"Alam","Age":25,"Company":"Switchme","Role":"Developer","Department":"Tech","Head":{"Id":3,"Name":"Sourasis Roy"}},{"firstName":"Amith","lastName":"Manniken","Age":25,"Company":"Switchme","Role":"Developer","Department":"Tech","Head":{"Id":3,"Name":"Sourasis Roy"}},{"firstName":"Sourasis","lastName":"Roy","Age":28,"Company":"Switchme","Role":"CTO"},{"firstName":"Aditya","lastName":"Mishra","Age":29,"Company":"Switchme","Department":"Tech","Role":"CEO"},{"firstName":"Priti","lastName":"Lata","Age":24,"Company":"Switchme","Role":"HR"},{"firstName":"Sumita","lastName":"Nath","Age":24,"Company":"Switchme","Role":"HLA Head","Department":"Crm"},{"firstName":"Tarini","lastName":"Khanna","Age":22,"Company":"Switchme","Role":"Content Writer"},{"firstName":"Abhisek","lastName":"Soni","Age":23,"Company":"Switchme","Role":"HLA","Department":"Crm","Head":{"Id":5,"Name":"Sumita Nath"}},{"firstName":"Ankit","lastName":"Pump","Age":23,"Company":"Switchme","Role":"HLA","Department":"Crm","Head":{"Id":5,"Name":"Sumita Nath"}},{"firstName":"Pogo","lastName":"Laal","Age":23,"Company":"Switchme","Role":"Designer"},{"firstName":"Sabina","lastName":"Sekh","Age":28,"Company":"Switchme","Role":"HLA Head","Department":"Crm"},{"firstName":"Sanjay","lastName":"Poudal","Age":24,"Company":"Switchme","Role":"HLA Head","Department":"Crm","Head":{"Id":10,"Name":"Sabina Sekh"}}];
$(document).ready(function(){
    $("select.employee").change(function(){
        var selectedEmployee = $(this).children("option:selected").val();
        $.each( employee, function( key, value ) {
            if(employee["firstName"]==selectedEmployee) {
                $("div.print").html("The head of"+selectedEmployee+"is"+employee["Head"]["Name"]);
            }
        });
    });
});


<h3>1. Who is Head of </h3>
<select class="employee">
    <option value="0">Select</option>
    <option name="Amith" id="Amith" value="Amith" >Amith</option>
    <option name="Sourasis" id="Sourasis" value="Sourasis">Sourasis</option>
    <option name="Abhisek" id="Abhishek" value="Abhisek">Abhisek</option>
    <option name="Sanjay" id="Sanjay" value="Sanjay">Sanjay</option>
</select>

Answer 1

这是您要的吗？

var employee = [{
  "firstName": "Zahir",
  "lastName": "Alam",
  "Age": 25,
  "Company": "Switchme",
  "Role": "Developer",
  "Department": "Tech",
  "Head": {
    "Id": 3,
    "Name": "Sourasis Roy"
  }
}, {
  "firstName": "Amith",
  "lastName": "Manniken",
  "Age": 25,
  "Company": "Switchme",
  "Role": "Developer",
  "Department": "Tech",
  "Head": {
    "Id": 3,
    "Name": "Sourasis Roy"
  }
}, {
  "firstName": "Sourasis",
  "lastName": "Roy",
  "Age": 28,
  "Company": "Switchme",
  "Role": "CTO"
}, {
  "firstName": "Aditya",
  "lastName": "Mishra",
  "Age": 29,
  "Company": "Switchme",
  "Department": "Tech",
  "Role": "CEO"
}, {
  "firstName": "Priti",
  "lastName": "Lata",
  "Age": 24,
  "Company": "Switchme",
  "Role": "HR"
}, {
  "firstName": "Sumita",
  "lastName": "Nath",
  "Age": 24,
  "Company": "Switchme",
  "Role": "HLA Head",
  "Department": "Crm"
}, {
  "firstName": "Tarini",
  "lastName": "Khanna",
  "Age": 22,
  "Company": "Switchme",
  "Role": "Content Writer"
}, {
  "firstName": "Abhisek",
  "lastName": "Soni",
  "Age": 23,
  "Company": "Switchme",
  "Role": "HLA",
  "Department": "Crm",
  "Head": {
    "Id": 5,
    "Name": "Sumita Nath"
  }
}, {
  "firstName": "Ankit",
  "lastName": "Pump",
  "Age": 23,
  "Company": "Switchme",
  "Role": "HLA",
  "Department": "Crm",
  "Head": {
    "Id": 5,
    "Name": "Sumita Nath"
  }
}, {
  "firstName": "Pogo",
  "lastName": "Laal",
  "Age": 23,
  "Company": "Switchme",
  "Role": "Designer"
}, {
  "firstName": "Sabina",
  "lastName": "Sekh",
  "Age": 28,
  "Company": "Switchme",
  "Role": "HLA Head",
  "Department": "Crm"
}, {
  "firstName": "Sanjay",
  "lastName": "Poudal",
  "Age": 24,
  "Company": "Switchme",
  "Role": "HLA Head",
  "Department": "Crm",
  "Head": {
    "Id": 10,
    "Name": "Sabina Sekh"
  }
}];

$(document).ready(function() {
  $("select.employee").change(function() {
    var selectedEmployee = this.value
    $.each(employee, function(i, emp) {
      if (emp.firstName == selectedEmployee) {
        if (emp.Head) {
          $("div.print").html("The head of " + selectedEmployee + " is " + emp.Head.Name);
        } else {
          $("div.print").html(selectedEmployee + " has no head! ");
        }
      }
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h3>1. Who is Head of </h3>
<select class="employee">
  <option value="0">Select</option>
  <option name="Amith" id="Amith" value="Amith">Amith</option>
  <option name="Sourasis" id="Sourasis" value="Sourasis">Sourasis</option>
  <option name="Abhisek" id="Abhishek" value="Abhisek">Abhisek</option>
  <option name="Sanjay" id="Sanjay" value="Sanjay">Sanjay</option>
</select>

<hr>

<div class="print"></div>

Answer 2

一些问题：

在循环中，您应该查看value而不是employee的属性
在您的输出字符串中添加空格，否则它们将粘在一起
某些员工对象没有“ Head”属性，因此您应该处理这种情况
找到雇员后，您可以使用return false退出循环。
要从下拉列表中获取选定的值，您实际上不需要执行children("option:selected")。您可以仅在.val() jQuery元素上进行select

您应该这样做：

var employee=[{"firstName":"Zahir","lastName":"Alam","Age":25,"Company":"Switchme","Role":"Developer","Department":"Tech","Head":{"Id":3,"Name":"Sourasis Roy"}},{"firstName":"Amith","lastName":"Manniken","Age":25,"Company":"Switchme","Role":"Developer","Department":"Tech","Head":{"Id":3,"Name":"Sourasis Roy"}},{"firstName":"Sourasis","lastName":"Roy","Age":28,"Company":"Switchme","Role":"CTO"},{"firstName":"Aditya","lastName":"Mishra","Age":29,"Company":"Switchme","Department":"Tech","Role":"CEO"},{"firstName":"Priti","lastName":"Lata","Age":24,"Company":"Switchme","Role":"HR"},{"firstName":"Sumita","lastName":"Nath","Age":24,"Company":"Switchme","Role":"HLA Head","Department":"Crm"},{"firstName":"Tarini","lastName":"Khanna","Age":22,"Company":"Switchme","Role":"Content Writer"},{"firstName":"Abhisek","lastName":"Soni","Age":23,"Company":"Switchme","Role":"HLA","Department":"Crm","Head":{"Id":5,"Name":"Sumita Nath"}},{"firstName":"Ankit","lastName":"Pump","Age":23,"Company":"Switchme","Role":"HLA","Department":"Crm","Head":{"Id":5,"Name":"Sumita Nath"}},{"firstName":"Pogo","lastName":"Laal","Age":23,"Company":"Switchme","Role":"Designer"},{"firstName":"Sabina","lastName":"Sekh","Age":28,"Company":"Switchme","Role":"HLA Head","Department":"Crm"},{"firstName":"Sanjay","lastName":"Poudal","Age":24,"Company":"Switchme","Role":"HLA Head","Department":"Crm","Head":{"Id":10,"Name":"Sabina Sekh"}}];

$(document).ready(function(){
    $("select.employee").change(function(){
        var selectedEmployee = $(this).val();
        $.each( employee, function( key, value ) {
            if(value["firstName"] == selectedEmployee) {
                $("div.print").text("The head of " +selectedEmployee+" is "+ (value["Head"] ? value["Head"]["Name"] : "unknown"));
                return false; // exit;
            }
        });
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>1. Who is Head of </h3>
<select class="employee">
    <option value="0">Select</option>
    <option name="Amith" id="Amith" value="Amith" >Amith</option>
    <option name="Sourasis" id="Sourasis" value="Sourasis">Sourasis</option>
    <option name="Abhisek" id="Abhishek" value="Abhisek">Abhisek</option>
    <option name="Sanjay" id="Sanjay" value="Sanjay">Sanjay</option>
</select>
<br>
<div class="print"></div>

我想使用jQuery找到Abhishek的负责人

2 个答案: