patternjavascriptMinor
Is it possible to condense and/or tidy these jQuery functions?
Viewed 0 times
thesecondensepossiblejquerytidyandfunctions
Problem
Here is a JSFiddle of my problem.
I have one `
$(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
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
Using
CODE:
UPDATE:
Borrowing the array idea from @Ocelot20, you can further simplify by putting your values in a dictionary and then using a
UPDATE: optimizing for two calls to jQuery (one for hiding, one for showing).
"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.