javascript - jquery tabbed selector with dropdown selectors, dropdowns don't match on tab switch -
thanks members oka , mike robinson, have managed build 2 tables users view , play using tabs , dropdowns.
my 2 tables have identical structures, each has identical drop-down menu show/hide columns. idea user select "choice" drop down, tab on other table , compare choices.
everything works, except -- when tab on other table, correct column -- '.target' -- shown (and correct columns -- '.choice' -- hidden) drop down resets default. drop down displays 1 choice; shown columns display another, confuse viewers.
the code "remembers" choices hidden , target shown, drop down doesn't.
i'm bit stumped. ideas what's going on?
here jquery, css, html, , 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>
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'); }); }); $(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>
Comments
Post a Comment