Jquery带有下拉选择器的选项卡选择器，下拉选择器不匹配TAB开关

感谢成员oka和Mike Robinson的帮助，我已经设法构建了两个表，用户将使用选项卡和下拉菜单查看和玩。

我的两个表具有相同的结构，每个表都有相同的下拉菜单来显示/隐藏列。这个想法是让用户从下拉菜单中选择一个"选项"，然后切换到另一个表并比较选项。

一切正常，除了——当你切换到另一个表，正确的列——'。显示目标'——以及正确的列——'。选项"——"是隐藏的)，但下拉菜单将重置为默认值。下拉菜单显示一个选择;所显示的列显示另一个，这会使观看者感到困惑。

代码"记住"隐藏了哪些选项，显示了哪些目标，但下拉菜单不会。

我有点难住了。知道是怎么回事吗?

下面是jquery, css, html和代码片段:

    
       function keepSelect() { 
             var val = $(this).val();
             var target = '.' + val;
             $('.choice').hide();
             $(target).show();
       }
       $(document).ready(function() {
         $('.sel').on('change', keepSelect).change();
         $(document).on('change', '.sel', keepSelect).change();
                   $('ul.tabs li').click(function() {
           var tab_id = $(this).attr('data-tab');
           $('ul.tabs li').removeClass('current');
           $('.tab-content').removeClass('current');
           $(this).addClass('current');
           $('#' + tab_id).addClass('current');
         })
       })

 body {
   margin-top: 1px;
   font-family: 'Trebuchet MS', serif;
   line-height: 1.6
 }
 .container {
   position: absolute;
   width: 25%;
   margin: 0 auto;
 }
 ul.tabs {
   margin: 0px;
   padding: 0px;
   list-style: none;
 }
 ul.tabs li {
   background: none;
   color: #222;
   display: inline-block;
   padding: 10px 15px;
   cursor: pointer;
   border: 3px solid red;
   width: 25%;
   font-family: Verdana;
   font-size: 8pt;
   text-align: center;
   font-weight: normal;
 }
 ul.tabs li.current {
   background: #ededed;
   color: #222;
   font-family: Verdana;
   font-size: 10pt;
   text-align: center;
   font-weight: bold;
 }
 .tab-content {
   display: none;
   background: none;
   padding: 15px;
 }
 .tab-content.current {
   display: inherit;
 }

<div class='container'>
  <ul class='tabs'>
    <li class='tab-link current' data-tab='tab-1'>ViewA</li>
    <li class='tab-link' data-tab='tab-2'>ViewB</li>
  </ul>
  <div id='tab-1' class='tab-content current'>
    <select class="sel">
      <option class="one" value="one">1</option>
      <option class="two" value="two">2</option>
    </select>
    <table>
      <tr>
        <th>Module</th>
        <th>Units</th>
        <th class="choice one">Choice One</th>
        <th class="choice two">Choice Two</th>
      </tr>
      <tr>
        <td>type1</td>
        <td>5000</td>
        <td class="choice one">100</td>
        <td class="choice two">200</td>
      </tr>
      <tr>
        <td>type2</td>
        <td>350</td>
        <td class="choice one">40</td>
        <td class="choice two">90</td>
      </tr>
    </table>
  </div>
  <div id='tab-2' class='tab-content'>
    <select class="sel">
      <option class="one" value="one">1</option>
      <option class="two" value="two">2</option>
    </select>
    <table>
      <tr>
        <th>Module</th>
        <th>Units</th>
        <th class="choice one">Choice One</th>
        <th class="choice two">Choice Two</th>
      </tr>
      <tr>
        <td>type1</td>
        <td>55.56</td>
        <td class="choice one">2.9</td>
        <td class="choice two">9.87</td>
      </tr>
      <tr>
        <td>type2</td>
        <td>350</td>
        <td class="choice one">4.05</td>
        <td class="choice two">8.77</td>
      </tr>
    </table>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>