Interactive jQuery tabbed interface with drop-down selectors, inconsistent display of drop-down options when switching between tabs

After receiving assistance from members oka and Mike Robinson, I have successfully created two tables for users to interact with using tabs and dropdowns.

Both tables have the same structure and feature a dropdown menu to show/hide columns. Users can select a choice from the dropdown in one table and then switch over to the other table to compare choices.

Everything seems to be working well, except for one issue - when switching tables, the correct column ('.target') is displayed, but the dropdown resets to its default option. This discrepancy might confuse viewers as the displayed columns do not match the selected choice in the dropdown.

The code is able to remember which choices were hidden and which target was shown, but the dropdown selection does not reflect this behavior. Any thoughts on what could be causing this?

Below are the snippets of jquery, css, html that I am using:

javascriptjquerycssdrop-down-menu

Answer №1

Check out this solution:

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

Check out the Demo on jsFiddle

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Modifying the page header content using JavaScript

There's this snippet of code that alters the image on another page: <div class="imgbx"> <button onclick="window.location.href='index.html?image=images/xr-black.jpg&tit=XR-black'" >Invisible ...

javascripthtml

How to continuously submit a single form field with Jquery using setInterval?

After reviewing this jquery timer on jsfiddle, I must say it works quite effectively. However, my specific requirement is to submit a single form field at regular intervals. Consider the following HTML form structure: <form id="form"> <input ...

jqueryajaxformssubmit

Creating a modal window when a link is clicked in an MVC application

I am looking to open a Crystal Report in a pop-up window when a menu item is clicked. <%= Html.ActionLink("Display Name", "Action","Controller", new { target="blank"})%> The code above successfully opens the report, but it currently opens in a new ...

javascriptc#jqueryasp.net-mvcsql-server-2012

The display function in Javascript has a tendency to work sporadically

I’ve been tasked with creating my own tic tac toe game through coding. While I am relatively new to programming, I have a strong passion for it. At the moment, I've set up a basic function to hide only the "O", leaving only the "X" visible on the gr ...

javascripthtmlcssfunction

Having trouble with a JavaScript Promise that seems to be stuck in limbo

I have developed two custom promises that are quite similar, with the only difference being that they operate on distinct user inputs. Both promises utilize various classes and methods from Google Maps API v-3. What's puzzling is that when the first ...

javascriptasynchronousgoogle-maps-api-3promise

Include the selected class in the relative URL

I am attempting to apply a highlight class to my selected category: My code looks like this : <div id="category"> <ul> <a href="category.php?c=electronic"> <li>Electronic</li> </a> ...

javascriptphpjquery

Issue with transferring variables between functions in JSON and Jquery

I'm currently working on a script that involves retrieving the variable hf using getJSON $.getJSON('../scripts/json.php', function(json) { var user_function = json.hf; }); In addition to this, I have developed an auto_refresh feature ...

jqueryjson

Showing an alternative perspective retrieved through an ajax request

One of the challenges I encountered was displaying errors and warnings for each test run in a separate view from the Test view. To achieve this, I implemented an ajax call within the Test view to the RunTest controller: var testsToRun = []; ...

jqueryajaxasp.net-mvc

Using JavaScript variables within an @if statement in Laravel within the innerHTML segment

How can I incorporate a JavaScript variable 'x' into an @if statement in Laravel? I have tried placing it both inside and outside of the @if statement. When placed outside, it works perfectly fine, but I really need to perform an action based on ...

javascriptphplaravel

Consolidate and then transfer to a different database

How can I insert the data returned from my aggregate (controller function) into another collection called User? Here is the schema for the User: const userSchema = new mongoose.Schema({ firstName: { type: String, required: [true, &ap ...

javascriptnode.jsmongodbmongoose

Is it possible to delete a section of the URL within an anchor tag prior to the #anchor

My webpage contains a link that looks like this: <li class="jump"><a href="http://example.com/#about">About Me</a></li> I am interested in using jQuery to eliminate the 'http://example.com/' section of any URL found with ...

javascriptjqueryanchoranchor-scroll

Calculate the number of characters in the input and increase a variable by one every x characters

Currently, I am incorporating AngularJS into a new project and faced with the task of counting the length of a textarea. Adding up the total number of "pages" in the messaging app every 160 characters while decreasing if text is removed. Obtaining the len ...

javascriptangularjs

Determining the type of <this> in an Object extension method using TypeScript

I am attempting to incorporate a functionality similar to the let scope function found in Kotlin into TypeScript. My current strategy involves using declaration merging with the Object interface. While this approach generally works, I find myself missing ...

javascripttypescripttypestypescript-generics

Avoid TypeError: cannot read property '0' of undefined in a Vue.js/Django project

I am currently working on a Django/Vue.js application. Upon submitting the login form, the Django view redirects to the user's username page, where the Vue.Js file retrieves data from the server. Below is the code snippet: async created(){ await ...

javascriptdjangovue.js

Issue with Vue Loading Overlay Component functionality in nuxt2 .0

I've integrated the vue-loading-overlay plugin into my project. plugins/vueloadingoverlaylibrary.js import Vue from 'vue'; import Loading from 'vue-loading-overlay'; // import 'vue-loading-overlay/dist/vue-loading.css'; ...

javascriptvue.jsnuxt.jsvue-componentloader

Tips for incorporating JavaScript into elements that have been modified using jQuery's .html() method

Consider this example: $('#key').on('click', function(){ $('.task').html("<button id='key'>Button</button>"+Date()); }) <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.j ...

javascriptjqueryhtmlajax

Utilizing Node.js and Node-Postgres: Organizing Database Queries in Models

In order to enhance the efficiency of my code, I am looking to modularize my queries by organizing them into functions with appropriate names for their tasks. Instead of cluttering up the req, res functions (controllers), I aim to encapsulate them in a se ...

javascriptnode.jspostgresql

The path('/') in $rootScope is not functioning properly

Below is a function called register() that I am working with. <form class="form-auth" ng-submit="register()"> This is how I have defined the register function: $scope.register = function(){ $http.post('/auth/signup', $scope.user).success ...

javascriptangularjsmean

Utilizing NGINX as a reverse proxy for secure communication with Node.js

I'm currently running an NGINX server setup as a reverse-proxy server for a node application. I am now trying to enable HTTPS, but every time I attempt to access the site via HTTPS, I encounter a "502: Bad Gateway" error. server { listen 80; ...

javascriptnode.jsexpressnginx

"Implementing a seamless transition effect on two slideshows using jQuery's fadeslideshow

I currently have a homepage featuring a fadeslideshow with 5 slides. The fadeslideshow plugin being used can be found at http://plugins.jquery.com/project/fadeslideshow. On the homepage, there is also a menu bar with various menu items. When a user clicks ...

javascriptjqueryhtmlcss