jquery tabbed selector with dropdown selectors, dropdowns don't match on tab switch

Question

Thanks to help from members oka and Mike Robinson, I have managed to build two tables that users will view and play with using tabs and dropdowns.

My two tables have identical structures, each has an identical drop-down menu to show/hide columns. The idea is for the user to select a "choice" from the drop down, then tab over to the other table and compare choices.

Everything works, EXCEPT -- when you tab over to the other table, the correct column -- '.target' -- is shown (and the correct columns -- '.choice' -- are hidden) but the drop down resets to its default. So the drop down displays one choice; the shown columns display another, which will confuse viewers.

The code "remembers" which choices were hidden and which target was shown, but the drop down doesn't.

I'm a bit stumped. Any ideas what's going on?

Here are the jquery, css, html, and snippet:

    
       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>

Answer 1

Try this:

$(document).ready(function () {
    $('.choice').hide();
    $('.one').show();

    $('.sel').change(function(){
        $('.choice').hide();
        $( '.' + this.value).show();
        $('.sel').val( this.value );
    });

    $('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');
    });
});

jsFiddle Demo

$(document).ready(function () {
    $('.sel').change(function(){
        $('.choice').hide();
        $( '.'+this.value).show();
        $('.sel').val( this.value );
    });
    
    $('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;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<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>