Dynamically populated select lists

Question

I have 2 select lists and I would like to populate the options in the 2nd list based on the selection of the first list.

This is the first list:

<select class="" id="applicationForm_package">
    <option value="no_package">Please select a package</option>
    <option package_identifier="package_5" value="5">Package 1</option>
    <option package_identifier="package_60" value="60">Package 2</option>
    <option package_identifier="package_58" value="58">Package 3</option>
    <option package_identifier="package_55" value="55">Package 4</option>
</select>

I then have (in javascript) and variable for each package in the first list:

<script>
    var package_5 = "<option value='20'>1 Month</option><option value='110'>6 Months</option><option value='200'>12 Months</option>";
    var package_60 = "<option value='25'>1 Month</option><option value='140'>6 Months</option><option value='250'>12 Months</option>";
    var package_58 = "<option value='26'>1 Month</option><option value='146'>6 Months</option><option value='270'>12 Months</option>";
    var package_55 = "<option value='37'>1 Month</option><option value='212'>6 Months</option><option value='400'>12 Months</option>";
</script>

As the user interacts with the first select list, I would like the options from the respective variables to populate the 2nd list.

Below is the 2nd select and the javascript that I have written. Everything seems to work fine, the issue is the 2nd select list is not getting updated. In my else statement, the console is working but the variable is not defined when I check it in my console.

<select id="applicationForm_subscription">
    <option value="no_package_selected">Please select a package First</option>
</select>

<script>
var noPackageSelected = "<option value='no_package_selected'>Please select a package</option>";
jQuery( "select#applicationForm_package" ).change(function() {
    var package_name = jQuery( "select#applicationForm_package option:selected").text();
    var package_id = jQuery( "select#applicationForm_package option:selected").val();
    if(package_id == "no_package"){
        jQuery("select#applicationForm_subscription").find("option").remove().end().append(noPackageSelected).val("no_package_selected");
    }else{
        console.log("update subscriptions");
        var get_selected_package_name = jQuery("select#applicationForm_package option:selected").attr('package_identifier');
        jQuery("select#applicationForm_subscription").find("option").remove().end().append(get_selected_package_name);
        }
    });

Any assistance would be great.

Cheers,

Just to simplify, note that `jQuery( "select#applicationForm_package option:selected").val();` equals to `jQuery( "select#applicationForm_package").val();` — Toni Michel Caubet, Mar 19 '15 at 13:02
That might help you : http://stackoverflow.com/a/26020014/2324107 — Karl-André Gagnon, Mar 19 '15 at 13:08

John Weisz · Answer 1 · 2015-03-19T13:24:50.353

Your code is messy for such a simple task as conditionally changing the innerHTML of an element.

A few things to note:

$ is a short-hand for jQuery
you can use $('select').val() to get the value of the selected option
it is redundant to use tag#id for identification, #id is both faster and shorter

If I understand you right, you want to:

listen to the change event of a (first) select,
see if its value is appropriate,
populate a second list based on selection from the first.

I recommend using an Object to store the markup for the second list - so that it would be more straightforward to only store a package ID in each option of the first list:

HTML

<select class="" id="applicationForm_package">
    <option value="5">Package 1</option>
    <option value="60">Package 2</option>
    <!-- ... -->
</select>

... and then set the second list's innerHTML using that ID with a string from the packages object:

JavaScript

var packages = {
    5: "<option value='20'>1 Month</option><option value='110'>6 Months</option><option value='200'>12 Months</option>",
    60: "<option value='25'>1 Month</option><option value='140'>12 Months</option><option value='250'>24 Months</option>",
    58: "<option value='26'>1 Month</option><option value='146'>2 Months</option><option value='270'>4 Months</option>",
    55: "<option value='37'>1 Month</option><option value='212'>4 Months</option><option value='400'>8 Months</option>"
};

$('#applicationForm_package').change(function () {
    // see if there is listing for this package ID
    if (packages.hasOwnProperty($(this).val()))
    {
        // List options
        $('#applicationForm_subscription').html(packages[$(this).val()]);
    }
    else
    {
        // Please select a package First
        $('#applicationForm_subscription').html('Please select a package First');
    }
});

Working example on JSFiddle.

score 0 · Answer 2 · answered Mar 19 '15 at 13:08

0

If you want dynamicaly get the content of the variable based on name then you should use this:

jQuery("select#applicationForm_subscription").find("option").remove().end()
    .append(window[get_selected_package_name]);

answered Mar 19 '15 at 13:08

jcubic

61,973
54
229
402

Dynamically populated select lists

2 Answers2