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は未定義です）。 Devを使用していない場合はhttps://developers.google.com/web/tools/chrome-devtools/iterate/inspect-styles/shortcuts?hl=enです。前のツール！