How to output a variable string when a dropdown box value is selected

Question

So I don't know if the title is worded correctly, but essentially what I'm trying to do is when something is selected in a drop-down, it runs a function that then selects its description and prints it out beneath the drop-down.

Here's my script so far:

window.onload = function() {

    var selectElement06 = document.getElementById("postalInfo");
    var paraElement06 = document.getElementById("ch06Para");

    if (selectElement06) {
        selectElement06.addEventListener('change', descPostalCode);
    }

    function descPostalCode() {

        var select = "Please choose a code";
        var usCode = "US Codes are 5 numbers optionally followed by a dash and 4 more numbers. Spaces may appear surrounding the dash (like so '00000 - 0000 or 00000-0000' but no where else)";
        var canCode = "Postal codes in Canada do not include the letters D, F, I, O, Q, or U, as the OCR equipment used in automated sorting could easily confuse them with other letters and digits. The letters W and Z are used, but are not currently used as the first letter. The Canadian Postal Codes use alternate letters and numbers (with a space after the 3rd character) in this format: A9A 9A9 Ref: https://en.wikipedia.org/wiki/Postal_code#Reserved_characters";
        var ukCode = "The format is as follows, where A signifies a letter and 9 a digit: <br /> <pre>  Format                    Coverage                              Example<br />AA9A 9AA   WC postcode area; EC1–EC4, NW1W, SE1P, SW1         EC1A 1BB<br />A9A 9AA    E1W, N1C, N1P                              W1A 0AX<br />A9 9AA     B, E, G, L, M, N, S, W                      M1 1AE<br />A99 9AA    B, E, G, L, M, N, S, W                       B33 8TH<br />AA9 9AA    All other postcodes                                 CR2 6XH<br />AA99 9AA   All other postcodes                                 DN55 1PT<br /> <br /> </pre> Notes:<br /> As all formats end with 9AA, the first part of a postcode can easily be extracted by ignoring the last three characters Areas with only single-digit districts: BR, FY, HA, HD, HG, HR, HS, HX, JE, LD, SM, SR, WC, WN, ZE (although WC is always subdivided by a further letter, e.g. WC1A).<br /> Areas with only double-digit districts: AB, LL, SO.<br /> Areas with a district '0' (zero): BL, BS, CM, CR, FY, HA, PR, SL, SS (BS is the only area to have both a district 0 and a district 10).<br /> The following central London single-digit districts have been further divided by inserting a letter after the digit and before the space: EC1–EC4 (but not EC50), SW1, W1, WC1, WC2, and part of E1 (E1W), N1 (N1C and N1P), NW1 (NW1W) and SE1 (SE1P).<br /> The letters QVX are not used in the first position.<br /> The letters IJZ are not used in the second position. <br /> The only letters to appear in the third position are ABCDEFGHJKPSTUW when the structure starts with A9A.<br /> The only letters to appear in the fourth position are ABEHMNPRVWXY when the structure starts with AA9A.<br /> The final two letters do not use the letters CIKMOV, so as not to resemble digits or each other when hand-written.<br /> Post code sectors are one of ten digits: 0 to 9 with 0 only used once 9 has been used in a post town, save for Croydon and Newport. Ref: https://en.wikipedia.org/wiki/Postcodes_in_the_United_Kingdom";
        var santaCode = " Canada Post introduced a special address for mail to Santa Claus, complete with its own postal code <br />SANTA CLAUS<br />NORTH POLE  H0H 0H0<br />CANADA<br /><br />In French, Santa's name Père Noël translates as 'Father Christmas', addressed as:<br />PÈRE NOËL<br />PÔLE NORD  H0H 0H0<br />CANADA<br /><br /><br />The postal code H0H 0H0 was chosen for this special seasonal use as it reads as 'Ho ho ho'.<br />The H0- prefix is an anomaly: the 0 indicates a very small, rural village, but H is used to designate Montreal, the second-largest city in Canada. As such, the H0- prefix is almost completely empty. H0M, assigned to the international Akwesasne tribal reserve on the Canada-US border, is the only other H0- postal code in active use. Ref https://en.wikipedia.org/wiki/Postal_codes_in_Canada#Santa_Claus";

        //var output = document.getElementById("postalInfo").selectedIndex;
            //alert(document.getElementsByTagName("option")[output].value);

}
        }

What's commented out is just a quick alert I was using to make sure it was working.

Here is my HTML:

<p>What postal/zip code do you need information about?</p>
    <select id="postalInfo" name="postalInfo">
        <option value="">Select one...</option>
        <option value="us">United States</option>
        <option value="canada">Canada</option>
        <option value="uk">United Kingdom</option>
        <option value="santa">Santa Claus</option>
    </select>

Now what I'm trying to accomplish is when, say, United States is selected from the drop-down, the function runs to call the variable usCode (the description) and outputs it beneath the drop-down (not in an alert, like my test). I've been trying to see if it would work by getting the postalInfo id and then the value of which ever corresponding option, and then figuring out a way to output the matching variable, but can't for the life of me figure it out.

Answer 1

HTML:

<p>What postal/zip code do you need information about?</p>
<select id="postalInfo" name="postalInfo">
    <option value="">Select one...</option>
    <option value="us">United States</option>
    <option value="canada">Canada</option>
    <option value="uk">United Kingdom</option>
    <option value="santa">Santa Claus</option>
</select>

<p id="Description"></p>

JS:

window.onload = function() {

var selectElement06 = document.getElementById("postalInfo");
var paraElement06 = document.getElementById("ch06Para");

if (selectElement06) {
    selectElement06.addEventListener('change', descPostalCode);
}
descPostalCode()
function descPostalCode() {

    var select = "Please choose a code";
    var usCode = "US Codes are 5 numbers optionally followed by a dash and 4 more numbers. Spaces may appear surrounding the dash (like so '00000 - 0000 or 00000-0000' but no where else)";
    var canCode = "Postal codes in Canada do not include the letters D, F, I, O, Q, or U, as the OCR equipment used in automated sorting could easily confuse them with other letters and digits. The letters W and Z are used, but are not currently used as the first letter. The Canadian Postal Codes use alternate letters and numbers (with a space after the 3rd character) in this format: A9A 9A9 Ref: https://en.wikipedia.org/wiki/Postal_code#Reserved_characters";
    var ukCode = "The format is as follows, where A signifies a letter and 9 a digit: <br /> <pre>  Format                    Coverage                              Example<br />AA9A 9AA   WC postcode area; EC1–EC4, NW1W, SE1P, SW1         EC1A 1BB<br />A9A 9AA    E1W, N1C, N1P                              W1A 0AX<br />A9 9AA     B, E, G, L, M, N, S, W                      M1 1AE<br />A99 9AA    B, E, G, L, M, N, S, W                       B33 8TH<br />AA9 9AA    All other postcodes                                 CR2 6XH<br />AA99 9AA   All other postcodes                                 DN55 1PT<br /> <br /> </pre> Notes:<br /> As all formats end with 9AA, the first part of a postcode can easily be extracted by ignoring the last three characters Areas with only single-digit districts: BR, FY, HA, HD, HG, HR, HS, HX, JE, LD, SM, SR, WC, WN, ZE (although WC is always subdivided by a further letter, e.g. WC1A).<br /> Areas with only double-digit districts: AB, LL, SO.<br /> Areas with a district '0' (zero): BL, BS, CM, CR, FY, HA, PR, SL, SS (BS is the only area to have both a district 0 and a district 10).<br /> The following central London single-digit districts have been further divided by inserting a letter after the digit and before the space: EC1–EC4 (but not EC50), SW1, W1, WC1, WC2, and part of E1 (E1W), N1 (N1C and N1P), NW1 (NW1W) and SE1 (SE1P).<br /> The letters QVX are not used in the first position.<br /> The letters IJZ are not used in the second position. <br /> The only letters to appear in the third position are ABCDEFGHJKPSTUW when the structure starts with A9A.<br /> The only letters to appear in the fourth position are ABEHMNPRVWXY when the structure starts with AA9A.<br /> The final two letters do not use the letters CIKMOV, so as not to resemble digits or each other when hand-written.<br /> Post code sectors are one of ten digits: 0 to 9 with 0 only used once 9 has been used in a post town, save for Croydon and Newport. Ref: https://en.wikipedia.org/wiki/Postcodes_in_the_United_Kingdom";
    var santaCode = " Canada Post introduced a special address for mail to Santa Claus, complete with its own postal code <br />SANTA CLAUS<br />NORTH POLE  H0H 0H0<br />CANADA<br /><br />In French, Santa's name Père Noël translates as 'Father Christmas', addressed as:<br />PÈRE NOËL<br />PÔLE NORD  H0H 0H0<br />CANADA<br /><br /><br />The postal code H0H 0H0 was chosen for this special seasonal use as it reads as 'Ho ho ho'.<br />The H0- prefix is an anomaly: the 0 indicates a very small, rural village, but H is used to designate Montreal, the second-largest city in Canada. As such, the H0- prefix is almost completely empty. H0M, assigned to the international Akwesasne tribal reserve on the Canada-US border, is the only other H0- postal code in active use. Ref https://en.wikipedia.org/wiki/Postal_codes_in_Canada#Santa_Claus";

    //var output = document.getElementById("postalInfo").selectedIndex;
        //alert(document.getElementsByTagName("option")[output].value);
        var option = document.getElementById("postalInfo").value;
        //alert(option);
        if(option == "us") // Better to use a Switch function. but this will work for now.
        {
            document.getElementById("Description").innerHTML = usCode;
        }
        else if(option == "canada")
        {
            document.getElementById("Description").innerHTML = canCode;
        }
        else if(option == "uk")
        {
            document.getElementById("Description").innerHTML = ukCode;
        }
        else if(option == "santa")
        {
            document.getElementById("Description").innerHTML = santaCode;
        }

   }
    }

Answer 2

 window.onload = function() { var selectElement06 = document.getElementById("postalInfo"); var paraElement06 = document.getElementById("ch06Para"); if (selectElement06) { selectElement06.addEventListener('change', descPostalCode); } function descPostalCode() { var select = "Please choose a code"; var usCode = "US Codes are 5 numbers optionally followed by a dash and 4 more numbers. Spaces may appear surrounding the dash (like so '00000 - 0000 or 00000-0000' but no where else)"; var canadaCode = "Postal codes in Canada do not include the letters D, F, I, O, Q, or U, as the OCR equipment used in automated sorting could easily confuse them with other letters and digits. The letters W and Z are used, but are not currently used as the first letter. The Canadian Postal Codes use alternate letters and numbers (with a space after the 3rd character) in this format: A9A 9A9 Ref: https://en.wikipedia.org/wiki/Postal_code#Reserved_characters"; var ukCode = "The format is as follows, where A signifies a letter and 9 a digit: <br /> <pre> Format Coverage Example<br />AA9A 9AA WC postcode area; EC1–EC4, NW1W, SE1P, SW1 EC1A 1BB<br />A9A 9AA E1W, N1C, N1P W1A 0AX<br />A9 9AA B, E, G, L, M, N, S, W M1 1AE<br />A99 9AA B, E, G, L, M, N, S, W B33 8TH<br />AA9 9AA All other postcodes CR2 6XH<br />AA99 9AA All other postcodes DN55 1PT<br /> <br /> </pre> Notes:<br /> As all formats end with 9AA, the first part of a postcode can easily be extracted by ignoring the last three characters Areas with only single-digit districts: BR, FY, HA, HD, HG, HR, HS, HX, JE, LD, SM, SR, WC, WN, ZE (although WC is always subdivided by a further letter, eg WC1A).<br /> Areas with only double-digit districts: AB, LL, SO.<br /> Areas with a district '0' (zero): BL, BS, CM, CR, FY, HA, PR, SL, SS (BS is the only area to have both a district 0 and a district 10).<br /> The following central London single-digit districts have been further divided by inserting a letter after the digit and before the space: EC1–EC4 (but not EC50), SW1, W1, WC1, WC2, and part of E1 (E1W), N1 (N1C and N1P), NW1 (NW1W) and SE1 (SE1P).<br /> The letters QVX are not used in the first position.<br /> The letters IJZ are not used in the second position. <br /> The only letters to appear in the third position are ABCDEFGHJKPSTUW when the structure starts with A9A.<br /> The only letters to appear in the fourth position are ABEHMNPRVWXY when the structure starts with AA9A.<br /> The final two letters do not use the letters CIKMOV, so as not to resemble digits or each other when hand-written.<br /> Post code sectors are one of ten digits: 0 to 9 with 0 only used once 9 has been used in a post town, save for Croydon and Newport. Ref: https://en.wikipedia.org/wiki/Postcodes_in_the_United_Kingdom"; var santaCode = " Canada Post introduced a special address for mail to Santa Claus, complete with its own postal code <br />SANTA CLAUS<br />NORTH POLE H0H 0H0<br />CANADA<br /><br />In French, Santa's name Père Noël translates as 'Father Christmas', addressed as:<br />PÈRE NOËL<br />PÔLE NORD H0H 0H0<br />CANADA<br /><br /><br />The postal code H0H 0H0 was chosen for this special seasonal use as it reads as 'Ho ho ho'.<br />The H0- prefix is an anomaly: the 0 indicates a very small, rural village, but H is used to designate Montreal, the second-largest city in Canada. As such, the H0- prefix is almost completely empty. H0M, assigned to the international Akwesasne tribal reserve on the Canada-US border, is the only other H0- postal code in active use. Ref https://en.wikipedia.org/wiki/Postal_codes_in_Canada#Santa_Claus"; var select_value = document.getElementById('postalInfo').options[document.getElementById('postalInfo').selectedIndex].value ; var code_for_load_info=select_value+'Code'; if(select_value==''){code_for_load_info='select';} var current_info=eval(code_for_load_info); document.getElementById('div_for_description').innerHTML=current_info; } } 

 <p>What postal/zip code do you need information about?</p> <select id="postalInfo" name="postalInfo"> <option value="">Select one...</option> <option value="us">United States</option> <option value="canada">Canada</option> <option value="uk">United Kingdom</option> <option value="santa">Santa Claus</option> </select> <div id="div_for_description"></div> 

Answer 3

Using a jQuery approach:

Add a div with id below your 'select' to receive the message:

<div id="message"></div>

and change the script to the following - I've simplified the messages, but the html you included should now render properly - and you need to change the wiki links to <a href='xxx'>link</a>

    $(window).on('load', function () {
        // When the selection changes
        $('#postalInfo').on('change', function () {
            // Get a reference to the message div
            var message = $(document.getElementById('message'));
            // Use switch/case instead of if : else statements - using the value of the option selected
            switch ($(this).val()) {
                // if the value selected is 'us'
                case 'us':
                    // Put the message, as html, into the message div ... etc
                    message.html("This is the Html message for US");
                    break;
                case 'canada':
                    message.html("This is the Html message for Canada");
                    break;
                case 'uk':
                    message.html("This is the Html message for the United Kingdom");
                    break;
                case 'santa':
                    message.html("This the Html message for Santa");
                    break;
                default:
                    break;
            }
        });

    });

From your tags to the question, I'm assuming you have jQuery referenced.