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。工具之前！