Setting a select value

Question

Hey all, Is there any way to set the value of a select and have it act as if it was changed by the user? I used

$(document).ready(function(){
    $('#department').change(function(){
        $('#academicbody').hide();
        var selected = $("#department :selected").val();
        $('#progrmmehome').load('/email/programmelist/'+selected);
    });
    $('#university').change(function(){
        var selected = $("#university :selected").val();
        $('#department').val(selected);
        $('#progrmmehome').load('/email/programmelist/'+selected);
    });
});

basically, when the university is selected, its value is the department id which is then used in the url. Thus in the change event of the select called "university", I was hoping, by setting the value of the department select, the logic in the change event for the department will execute.

Any ideas?

Answer 1

Have you tried calling $('#department').change() from within $('#university').change()?

Answer 2

I would have thought it would trigger the #department change event handler as well. You could manually trigger it as follows:

$('#university').change(function(){
    var selected = $("#university :selected").val();
    $('#department').val(selected);
    $('#department').trigger('change');
});

Answer 3

Here's a resource that addresses the exact problem you're describing:

jQuery val( val ) and the absence of onChange firing (also, here's a link to the Google cached version of the article, since the site is either slow or unresponsive at the moment: jQuery val( val ) and the absence of onChange firing (Cached))

To summarize, there is no reliable, cross-browser method of artificially triggering the actual browser event. Specifically, IE and Firefox implement the event differently, so it would be impossible for a cross-browser compliant library like jQuery to faithfully reproduce the event.

As such, the typical approach is to manually trigger the event handler that you have assigned via jQuery. For the previously mentioned reasons, this does not actually fire the event, but simply invokes the assigned handler function.

You could, as Pat suggested, manually trigger the event by using either $('#department').trigger('change'); or the shortcut function $('#department').change(); (both have the same effect). The article I linked above also suggests a creative solution. Rather that having to manually trigger the event each time, if you want to do this multiple times, simply extend jQuery like so:

    (function($) {
        $.fn.valChange = function(newValue) {
            return this.each(function() {
                var obj = $(this);
                obj.val(newValue);
                obj.change();
            });
        };
    })(jQuery);

Then, when you want to change a value, use the valChange() function instead of the standard val(). This says, in short, to change the value using the standard val() function, and then to trigger the change event.

Here's a live demo of all of this in action: http://jsfiddle.net/rXEPW/