Javascript：基于DropDown列表的填充表

Question

我从另一篇文章中借用了一些代码，所以我意识到col1的名称对于我的示例并不是必需的，但基本上只需要在选择某个员工信息时填充某个员工信息某些话题（工资，税收等）：

HTML：

<table class="table table-bordered table-striped"> 
    <tr> 
     <th> 
      <select class="col1 selectTopic"> 
       <option>Payroll</option> 
       <option>Tax</option> 
       <option>Accounts Payable</option> 
      </select> 
     </th> 
    </tr> 
    <tr> 
     <td class="col1 name"></td> 
    </tr> 
    <tr> 
     <td class="col1 photo"></td> 
    </tr> 
     <tr> 
     <td class="col1 email"></td> 
    </tr> 
     <tr> 
     <td class="col1 phone"></td> 
    </tr> 
</table> 

的Javascript：

var data = { 
    "contacts": 
{ 
     "contact": [ 
{ 
      "name": "Payroll", 
      "photo": "Emp 1 Photo", 
      "email": "emp1@mysite.com", 
      "phone": "4113834848"}, 
{ 
      "name": "Tax", 
      "photo": "Emp 2 Photo", 
      "email": "emp2@mysite.com", 
      "phone": "4113834848"}, 
{ 
      "name": "Accounts Payable", 
      "photo": "Emp 3 Photo", 
      "email": "emp3@mysite.com", 
      "phone": "4113834848"}, 
]} 
} 

$(".selectTopic").change(function() { 
    var jthis = $(this); 
    var whichCol; 
    if (jthis.hasClass("col1")) { 
     whichCol = "col1"; 
    } 
    $.each(data.topics.topic, function(i, v) { 
     if (v.name == jthis.val()) { 
      $("td." + whichCol + ".name").html(v.name); 
      $("td." + whichCol + ".photo").html(v.photo); 
      $("td." + whichCol + ".email").html(v.email); 
      $("td." + whichCol + ".phone").html(v.phone); 
      return; 
     } 
    }); 

}); 

Answer 1

你data.topics.topic，我相信你想data.contacts.contact

https://jsfiddle.net/qfy397jt/

你知道如何使用开发工具/控制台浏览器？它会告诉你这个错误的原因（data.topics未定义）。 https://developers.google.com/web/tools/chrome-devtools/iterate/inspect-styles/shortcuts?hl=en如果你还没有使用过Dev。工具之前！