javascript - 選択メニューで特定の値が選択されたときに表示される HTML テーブル

Question

私のhtmlページには、いくつかのオプションを含む選択メニューがあります。1 つのオプションを選択すると、そのオプションに関連するテーブルが html に表示されます。

たとえば、選択メニューで [管理者] を選択したときに、正確なテーブルを表示するにはどうすればよいですか? 次に、Engineering を選択すると、Admin テーブルが非表示になり、Engineering テーブルが表示されますか?

         <div class="controls">
             <select id="select01">
                <option id="admin">Admin</option>
                <option id="eng">Engineering</option>
             </select
          </div>

        <div style="display:none" id="admin">
            <table class="table table-bordered table-striped table-hover">
               <thead>
                 <tr>
                     <th>ADMIN</th>
                     <th>First Name</th>
                     <th>Last Name</th>
                    <th>Username</th>
                </tr>
               </thead>
              <tbody>
                  <tr>
                     <td>1</td>
                     <td>Mark</td>
                     <td>Otto</td>
                     <td>mdo</td>
                  </tr>
                </tbody>
             </table>
           </div>


        <div style="display:none" id="eng">
            <table class="table table-bordered table-striped table-hover">
               <thead>
                 <tr>
                     <th>Engineering</th>
                     <th>First Name</th>
                     <th>Last Name</th>
                    <th>Username</th>
                </tr>
               </thead>
              <tbody>
                  <tr>
                     <td>1</td>
                     <td>Mark</td>
                     <td>Otto</td>
                     <td>mdo</td>
                  </tr>
                </tbody>
             </table>
           </div>

ありがとうございました。