Getting Select Tag to work as a on click function in JQuery

Question

So I have this tab set up that works as on click links in desktop, but in tablet and mobile, I need it to be a select drop down list with the same functionality.

Here is the code for it on desktop as links:

jQuery(document).ready(function($) {
    $('.tabs .tab-links a').on('click', function(e)  {
        var currentAttrValue = $(this).attr('href');

        // Show/Hide Tabs
        $('.tabs ' + currentAttrValue).show().siblings().hide();

        // Change/remove current tab to active
        $(this).parent('li').addClass('active-tab').siblings().removeClass('active-tab');

        e.preventDefault();
    });        

This works perfect, now this is what I have for the select tag:

$('.tabs .tab-select select').on('change', function(e)    {  
    var currentAttrValue = $(this).attr('option');

    $('.tabs ' + currentAttrValue).show().siblings().hide();

});

How can I get the select tag code to work?

Answer 1

First of all, you don't need to do $('.tabs .tab-select select') (which means take the select tag that is a child of .tab-select ) because the select element that you are using has the .tab-select class itself.

Secondly, $(this).attr('option') is undefined inside your change handler, as it refers to a select attribute (no HTML tag has a select attribute) in the select element itself.

Workaround : To get the current option that was selected , you should make use of jQuery's :selected Selector , and concatenating the option's value (or the text) to the tab's id as such:

$('.tabs .tab-select').on('change', function(e){
       var currentOption = $('#' + $(this).attr('id') + ' option:selected').text();
       $('#tab' + currentOption).show().siblings().hide();
});

JSfiddle .

Answer 2

It works great in the JS Fiddle, but when I add it in to the overall JQuery it doesn't work

    jQuery(document).ready(function($) {
       $('.tabs .tab-links a').on('click', function(e)  {
        var currentAttrValue = $(this).attr('href');

         ////Show/Hide Tabs
       $('.tabs ' + currentAttrValue).show().siblings().hide();

     ////Change/remove current tab to active
    $(this).parent('li').addClass('active-tab').siblings().removeClass('active-tab');

    e.preventDefault();
});////desktop

$('.tabs .tab-select').on('change', function(e){
       var currentOption = $('#' + $(this).attr('id') + ' option:selected').text();
       $('#tab' + currentOption).show().siblings().hide();

});////mobile

});////end of JQuery block