HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptMinor

Is it possible to condense and/or tidy these jQuery functions?

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
thesecondensepossiblejquerytidyandfunctions

Problem

Here is a JSFiddle of my problem.

I have one ` on the page that lets you choose a brand:


    Please Select
    ────────────────────
    Aerospace Testing
    Aircraft Interiors
    Automotive Testing
    Business Airport
    Business Jet Interiors
    Electric & Hybrid Marine
    Electric & Hybrid Vehicle
    Engine
    Industrial Vehicle
    Marine Catering
    Marine Maintenance
    Meteorological
    Passenger Terminal World
    Postal
    Professional Motorsport Circuit
    Professional Motorsport World
    Stadia
    Tire
    Traffic
    Vehicle Dynamics
    Vision Zero
    Winter Sports


And another that displays possible banner types:


    Please Select
    ────────────────────
    Central Banner
    Left-Hand Banner
    Right-Hand (Large) Banner
    Right-Hand (Small) Banner
    Top (Header) Banner
    Left-Hand (Large) Banner
    Left-Hand (Small) Banner
    Right-Hand Banner
    Top Banner
    Central Banner
    Top Banner


And then a huge amount of JavaScript showing and hiding multiple
in the second when particular ` are chosen in the first. Is it possible to condense the following code down in any way?

``
$(document).ready(function () {
$("select[name=banner_type] option").hide();
});

$("select[name=website_brand]").click(function () {
if ($(this).val() == "PTW") {
// PASSENGER
$("select[name=banner_type] option[value=15]").show();
$("select[name=banner_type] option[value=17]").show();
$("select[name=banner_type] option[value=19]").show();
$("select[name=banner_type] option[value=21]").show();
// TRAFFIC
$("select[name=banner_type] option[value=11]").hide();
$("select[name=banner_type] option[value=13]").hide();
// OTHER
$("select[name=banner_type] option[value=1]").hide();
$("select[name=banner_type] option[value=3]").hide();
$("select[name=banner_type] option[value=5]").hide();
$("select[name=banner_type] opti

Solution

Two quick thoughts (and an example jsFiddle):

"switch" will keep you from having to write $(this).val() over and over again (as from the look of it, these lists will continue to grow).

Using $("select[name=banner_type] option").hide(); at the beginning of the .click() will keep you from having to individually .hide() elements.

CODE:

$("select[name=website_brand]").click(function () {
    // hide all 
    $("select[name=banner_type] option").hide();

    switch ($(this).val()){
        case "PTW":
            // show only: PASSENGER
            $("select[name=banner_type] option[value=15]").show();
            $("select[name=banner_type] option[value=17]").show();
            $("select[name=banner_type] option[value=19]").show();
            $("select[name=banner_type] option[value=21]").show();
            break;
        case "TFM":
            // show only: TRAFFIC
            $("select[name=banner_type] option[value=11]").show();
            $("select[name=banner_type] option[value=13]").show();
            break;
        default:
            // show only: OTHER
            $("select[name=banner_type] option[value=1]").show();
            $("select[name=banner_type] option[value=3]").show();
            $("select[name=banner_type] option[value=5]").show();
            $("select[name=banner_type] option[value=7]").show();
            $("select[name=banner_type] option[value=9]").show();
            break;
    }
});


UPDATE:
Borrowing the array idea from @Ocelot20, you can further simplify by putting your values in a dictionary and then using a .each() to show the necessary options.

$("select[name=website_brand]").change(function () {
    // hide all 
    $("select[name=banner_type] option").hide();

    var displaySettings = {
        "PTW": [15, 17, 19, 21], // show only: PASSENGER
        "TFM": [11, 13], // show only: TRAFFIC
        "OTHER": [1, 3, 5, 7, 9], // show only: OTHER
    };

    switch ($(this).val()){
        case "PTW":
            jQuery.each(displaySettings["PTW"], function(index, value) {
                $("select[name=banner_type] option[value="+value+"]").show();
            });
            break;
        case "TFM":
            jQuery.each(displaySettings["TFM"], function(index, value) {
                $("select[name=banner_type] option[value="+value+"]").show();
            });
            break;
        default:
            jQuery.each(displaySettings["OTHER"], function(index, value) {
                $("select[name=banner_type] option[value="+value+"]").show();
            });
            break;
    }
});


UPDATE: optimizing for two calls to jQuery (one for hiding, one for showing).

Code Snippets

$("select[name=website_brand]").click(function () {
    // hide all 
    $("select[name=banner_type] option").hide();

    switch ($(this).val()){
        case "PTW":
            // show only: PASSENGER
            $("select[name=banner_type] option[value=15]").show();
            $("select[name=banner_type] option[value=17]").show();
            $("select[name=banner_type] option[value=19]").show();
            $("select[name=banner_type] option[value=21]").show();
            break;
        case "TFM":
            // show only: TRAFFIC
            $("select[name=banner_type] option[value=11]").show();
            $("select[name=banner_type] option[value=13]").show();
            break;
        default:
            // show only: OTHER
            $("select[name=banner_type] option[value=1]").show();
            $("select[name=banner_type] option[value=3]").show();
            $("select[name=banner_type] option[value=5]").show();
            $("select[name=banner_type] option[value=7]").show();
            $("select[name=banner_type] option[value=9]").show();
            break;
    }
});
$("select[name=website_brand]").change(function () {
    // hide all 
    $("select[name=banner_type] option").hide();

    var displaySettings = {
        "PTW": [15, 17, 19, 21], // show only: PASSENGER
        "TFM": [11, 13], // show only: TRAFFIC
        "OTHER": [1, 3, 5, 7, 9], // show only: OTHER
    };

    switch ($(this).val()){
        case "PTW":
            jQuery.each(displaySettings["PTW"], function(index, value) {
                $("select[name=banner_type] option[value="+value+"]").show();
            });
            break;
        case "TFM":
            jQuery.each(displaySettings["TFM"], function(index, value) {
                $("select[name=banner_type] option[value="+value+"]").show();
            });
            break;
        default:
            jQuery.each(displaySettings["OTHER"], function(index, value) {
                $("select[name=banner_type] option[value="+value+"]").show();
            });
            break;
    }
});

Context

StackExchange Code Review Q#52429, answer score: 6

Revisions (0)

No revisions yet.