jquery 带有下拉选择器的选项卡式选择器，下拉菜单与选项卡开关不匹配

Question

感谢成员 oka 和 Mike Robinson 的帮助，我成功构建了两个 table，用户可以使用选项卡和下拉菜单查看和使用它们。

我的两个 table 具有相同的结构，每个都有相同的 show/hide 列下拉菜单。这个想法是让用户从下拉列表中 select 一个 "choice"，然后切换到另一个 table 并比较选择。

一切正常，除了 -- 当您切换到另一个 table 时，显示正确的列 -- '.target'（以及正确的列 -- '.choice' --被隐藏）但下拉菜单重置为默认值。所以下拉列表显示一个选择；显示的列显示另一个，这会使观众感到困惑。

代码 "remembers" 隐藏了哪些选项和显示了哪些目标，但下拉列表没有。

我有点难过。有什么想法吗？

以下是 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>

Answer 1

试试这个：

$(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>

jquery 带有下拉选择器的选项卡式选择器，下拉菜单与选项卡开关不匹配

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

javascript

css

jquery

drop-down-menu