Manually set combobox's value doesnt work before triggering change event

Question

I'm at loss on how to manually update the combobox's selected value, before executing JQuery trigger "change" event for it to pick up the saved selected value. No matter what I do, the saved selected value in change event is blank.

I'm using saved values from the database that is passed on to javascript during webpage loading, which when done is to have javascript re-do the combobox selection (& firing off a few more comboboxes afterward [in this case, Make, Model & Trim]).

Is there a way to make this work? Because I manually selected it just once, should work the same way as user selecting the combobox manually with a mouse-click. Thanks.

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function () {
            function AnimationBegin3() {
                var $deferred = $.Deferred();

                /* Start animation */

                $deferred.resolve();
                return $deferred;
            }
            function AnimationEnd3() {
                var $deferred = $.Deferred();

                /* End animation */

                $deferred.resolve();
                return $deferred;
            }
            function FormLoad_Years_Combobox(parmFormYearId) {
                var formYearSelectedValue = "";

                $('#' + parmFormYearId).on('change', function () {
                    formYearSelectedValue = ($('#' + parmFormYearId).val() == null ? "" : $('#' + parmFormYearId).val());

                    alert("This selected Year is " + formYearSelectedValue);

                    $('#' + parmFormYearId).empty();

                    AnimationBegin3().done(function () {
                        $('#' + parmFormYearId).append("<option value='2013'" + ("2013" == formYearSelectedValue ? " selected" : "") + ">2013</option>");
                        $('#' + parmFormYearId).append("<option value='2012'" + ("2012" == formYearSelectedValue ? " selected" : "") + ">2012</option>");
                        $('#' + parmFormYearId).append("<option value='2011'" + ("2011" == formYearSelectedValue ? " selected" : "") + ">2011</option>");
                        $('#' + parmFormYearId).append("<option value='2010'" + ("2010" == formYearSelectedValue ? " selected" : "") + ">2010</option>");
                        $('#' + parmFormYearId).append("<option value='2009'" + ("2009" == formYearSelectedValue ? " selected" : "") + ">2009</option>");

                        AnimationEnd3();
                    }).fail(function () { AnimationEnd3(); });
                });
            }

            //Load webpage...
            FormLoad_Years_Combobox('formYear');

            //Trial #1...
            //$('#formYear').val('2010').change();

            //Trial #2...
            //$('#formYear').val('2010').trigger('change');

            //Trial #3...
            //$('#formYear').trigger('change', function () { $('#formYear').val('2010'); });

            //Trial #4...
            //$('#formYear').val('2010');
            //$('#formYear').trigger('change');

            //Trial #5...
            $('#formYear').val('2010');
            $('#formYear').change();
        });
    </script>
    </head>
    <body>
        <select id="formYear" name="formYear"></select>
    </body>
</html>

Greg Burghardt · Accepted Answer · 2014-11-20T17:44:51.077

You need to set the value of the <select> after your animations have run, and after you populate the dropdown with <option>s.

function FormLoad_Years_Combobox(parmFormYearId) {
    var formYearSelectedValue = "";

    $('#' + parmFormYearId).on('change', function () {
        formYearSelectedValue = ($('#' + parmFormYearId).val() == null ? "" : $('#' + parmFormYearId).val());

        alert("This selected Year is " + formYearSelectedValue);

        $('#' + parmFormYearId).empty();

        AnimationBegin3().done(function () {
            $('#' + parmFormYearId).append("<option value='2013'" + ("2013" == formYearSelectedValue ? " selected" : "") + ">2013</option>");
            $('#' + parmFormYearId).append("<option value='2012'" + ("2012" == formYearSelectedValue ? " selected" : "") + ">2012</option>");
            $('#' + parmFormYearId).append("<option value='2011'" + ("2011" == formYearSelectedValue ? " selected" : "") + ">2011</option>");
            $('#' + parmFormYearId).append("<option value='2010'" + ("2010" == formYearSelectedValue ? " selected" : "") + ">2010</option>");
            $('#' + parmFormYearId).append("<option value='2009'" + ("2009" == formYearSelectedValue ? " selected" : "") + ">2009</option>");

            $('#' + parmFormYearId).val(formYearSelectedValue);

            AnimationEnd3();
        }).fail(function () { AnimationEnd3(); });
    });
}

The reason for setting the value inside the callback for the animation is so you avoid a race condition.

Your original code is setting the value on the <select> before the animation callback is executed, so you are setting a value on an empty dropdown. Since no <option> exists in the dropdown with that value, the value property remains an empty string.

After that the animation finishes, executes the callback, and fills the dropdown with <option>s. Since the current value is an empty string, nothing gets selected in the dropdown.

To avoid this race condition, you need to set the value of the dropdown after you fill it with <option>s, not after you call FormLoad_Years_Combobox.

You'll probably want to alter the FormLoad_Years_Combobox function to accept a default value:

function FormLoad_Years_Combobox(parmFormYearId, defaultValue) {
    var formYearSelectedValue = "";
    var $year = $('#' + parmFormYearId);

    $year.on('change', function () {
        formYearSelectedValue = defaultValue || $('#' + parmFormYearId).val();

        $year.empty();

        AnimationBegin3().done(function () {
            $year.append("<option value='2013'" + ("2013" == formYearSelectedValue ? " selected" : "") + ">2013</option>")
                .append("<option value='2012'" + ("2012" == formYearSelectedValue ? " selected" : "") + ">2012</option>")
                .append("<option value='2011'" + ("2011" == formYearSelectedValue ? " selected" : "") + ">2011</option>")
                .append("<option value='2010'" + ("2010" == formYearSelectedValue ? " selected" : "") + ">2010</option>")
                .append("<option value='2009'" + ("2009" == formYearSelectedValue ? " selected" : "") + ">2009</option>");
                .val(formYearSelectedValue);

            alert("This selected Year is " + formYearSelectedValue);

            AnimationEnd3();
        }).fail(function () { AnimationEnd3(); });
    });
}

//Load webpage...
FormLoad_Years_Combobox('formYear', '2010');

You also should save the result of $('#' + parmFormYearId) in a variable and reference that. Additionally, most jQuery methods return the jQuery object itself so you can chain the method calls together.

But the "formYearSelectedValue" in the next line, after the "$('#' + parmFormYearId).on('change', function () {" line of code contains blank value. You can grab the source code from the post and tweak with it. — fletchsod, Nov 20 '14 at 17:35
@fletchsod: I added to my answer to help explain what's going on to cause your problem. — Greg Burghardt, Nov 20 '14 at 17:46
Err... That's what I'm afraid of, passing in defaultValue. Okay, that I will have to make do with. I didn't think, or realized the asynchronous animation had to do with this problem. :-) Thanks man! — fletchsod, Nov 20 '14 at 17:51

Manually set combobox's value doesnt work before triggering change event

1 Answers1