Using .append() in a loop to add text from an object after a <select> based on the selected option

dm8021122

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];
                    }
                }
            }
        }
    }
adeneo

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

FIDDLE

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Unable to append and update option from select selected jquery

From Dev

Disable/Enable a text box based on radio/select option selected Javascript

From Dev

Meteor select option selected in with loop

From Dev

Select option and append text in textarea

From Dev

Update select options based on other selected option from database

From Dev

Make the checkbox checked and select option selected after using filter

From Dev

Append selected to option after form submission with error

From Dev

Get the text from a selected option

From Dev

Get text from selected option

From Dev

use jQuery to select option from menu based on its text not value

From Dev

Add a method to an object after .append()

From Dev

I wanted to call the javascript function, when the select option(It is based on for loop) is selected only once

From Dev

How to disable <select> option based on other <select> option selected?

From Dev

Trying to add an option to select with append, and nothing happens

From Dev

Change options in same select based on selected option

From Dev

Change select options based on another selected option

From Dev

Select array based on which option is selected

From Dev

Angularjs, select option after getting object from server

From Dev

jQuery - loop selected option text for multiple selects

From Dev

HTML select option show list after first select option selected

From Dev

HTML select option show list after first select option selected

From Dev

How to change text based on option selected?

From Dev

Add selected attribute to a option based on a expression in Aurelia

From Dev

Add class to dropdown based on selected Option AngularJs

From Dev

Show a different text for the selected option for `<select>`s

From Dev

Style text of select when the selected option is disabled

From Dev

Add class to "select" if default option is selected

From Dev

how to add text area when i select any option from select option

From Dev

The text is not displaying when I add it from "append" using jQuery

Related Related

  1. 1

    Unable to append and update option from select selected jquery

  2. 2

    Disable/Enable a text box based on radio/select option selected Javascript

  3. 3

    Meteor select option selected in with loop

  4. 4

    Select option and append text in textarea

  5. 5

    Update select options based on other selected option from database

  6. 6

    Make the checkbox checked and select option selected after using filter

  7. 7

    Append selected to option after form submission with error

  8. 8

    Get the text from a selected option

  9. 9

    Get text from selected option

  10. 10

    use jQuery to select option from menu based on its text not value

  11. 11

    Add a method to an object after .append()

  12. 12

    I wanted to call the javascript function, when the select option(It is based on for loop) is selected only once

  13. 13

    How to disable <select> option based on other <select> option selected?

  14. 14

    Trying to add an option to select with append, and nothing happens

  15. 15

    Change options in same select based on selected option

  16. 16

    Change select options based on another selected option

  17. 17

    Select array based on which option is selected

  18. 18

    Angularjs, select option after getting object from server

  19. 19

    jQuery - loop selected option text for multiple selects

  20. 20

    HTML select option show list after first select option selected

  21. 21

    HTML select option show list after first select option selected

  22. 22

    How to change text based on option selected?

  23. 23

    Add selected attribute to a option based on a expression in Aurelia

  24. 24

    Add class to dropdown based on selected Option AngularJs

  25. 25

    Show a different text for the selected option for `<select>`s

  26. 26

    Style text of select when the selected option is disabled

  27. 27

    Add class to "select" if default option is selected

  28. 28

    how to add text area when i select any option from select option

  29. 29

    The text is not displaying when I add it from "append" using jQuery

HotTag

Archive