I want to insert a peace of text under a dropdown menu after an option has been selected based on what option was selected. I've written code that will do exactly what I want it to. But it seems like there should be a faster and more elegant way to handle what I'm trying to do. I'm thinking loop but loops confuse me a bit and I'm not sure what I've done wrong with the function I wrote to try do this.
Here is my original working code:
$('#Total_Package_Pool_Size').change(function() {
$('#PS_Dyn_warn').empty();
$('#PS_Dyn_warn').append("This is the exact size of the pool, this is not an up to size.")
var PS_Warning_Obj = {
one : " A pool 14 x 28 is track space 14 and track length 29",
two : " A pool 16 x 32 is track space 16 and track length 33",
three: " A pool 18 x 34 is track space 18 and track length 35",
four : " A pool 20 x 40 is track space 20 and track lenght 41"
};
var PS_Warning = document.getElementById('PS_Dyn_warn');
var sizeDD = document.getElementById('Total_Package_Pool_Size');
var sizeOpt = sizeDD.options[sizeDD.selectedIndex].text;
switch (sizeOpt) {
case "14 x 28":
$('#PS_Dyn_warn').show();
$("#PS_Dyn_warn").append(PS_Warning_Obj.one);
break;
case "16 x 32":
$('#PS_Dyn_warn').show();
$("#PS_Dyn_warn").append(PS_Warning_Obj.two);
break;
case "18 x 36":
$('#PS_Dyn_warn').show();
$("#PS_Dyn_warn").append(PS_Warning_Obj.three);
break;
case "20 x 40":
$('#PS_Dyn_warn').show();
$("#PS_Dyn_warn").append(PS_Warning_Obj.four);
break;
}
});
And here is the loop I tried to write:
var PS_Warning_Obj = {};
PS_Warning_Obj['14x28'] = [" A pool 14 x 28 is track space 14 and track length 29"];
PS_Warning_Obj['16x32'] = [" A pool 16 x 32 is track space 16 and track length 33"];
PS_Warning_Obj['18x36'] = [" A pool 18 x 34 is track space 18 and track length 35"];
PS_Warning_Obj['20x40'] = [" A pool 20 x 40 is track space 20 and track lenght 41"];
function Dynamic_PS_Warning() {
$('#PS_Dyn_warn').empty();
$('#PS_Dyn_warn').append("This is the exact size of the pool, this is not an up to size.")
var sizeDD = document.getElementById('Total_Package_Pool_Size');
var sizeOpt = sizeDD.options[sizeDD.selectedIndex].text;
var PS_Warning = document.getElementById('PS_Dyn_warn');
var psArray = PS_Warning_Obj[sizeOpt];
if (psArray) {
for (var i = 0; i < psArray.length; i++) {
for (x in PS_Warning_Obj) {
if (psArray === sizeOpt) {
PS_Warning.append(PS_Warning_Obj[x];
}
}
}
}
}
Something like this is more dynamic, just inserting the numbers in the strings
$('#Total_Package_Pool_Size').change(function () {
var sizeOpt = $('#Total_Package_Pool_Size option:selected').text(),
arr = sizeOpt.split('x').map(function(x) {
return +$.trim(x);
}),
text1 = "This is the exact size of the pool, this is not an up to size.",
text2 = "A pool " + sizeOpt + " is track space " + arr[0] + " and track length " + (arr[1] + 1)
$('#PS_Dyn_warn').text(text1 + text2).show();
});
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments