Question

I have implemented following code:

$('#select1').change(function() {
    var options = '';
    if($(this).val() == 'a') {
        options = '<option value="1">1</option><option value="2">2</option>';
    }
    else if ($(this).val() == 'b'){
        options = '<option value="3">3</option><option value="4">4</option>';
    }

    $('#select2').html(options);
});

When the document is initialised i would like to call the change function first time, to populate my select, rather than changing options to trigger change. Is this possible and how?

Answer 1

This should do the job:

$("#select1").trigger("change");

Or even shorter:

$("#select1").change();

So finally your code might look so:

$(function() {
    $("#select1").change(function() {
        var options = "";
        if ($(this).val() == "a") {
            options = '<option value="1">1</option><option value="2">2</option>';
        } else if ($(this).val() == "b") {
            options = '<option value="3">3</option><option value="4">4</option>';
        }

        $("#select2").html(options);
    }).trigger("change");
});