jquery-select2 Loading remote data into Select or DropDown box using Search option Cascade dropdown / Select box in Jquery - Select2

Example

This is continuation of previous example.

Cascading DropDown for country's city name. This method will be called by Jquery when user is done with country selection in parent dropdown. I have followed MVC concept and provided the basic approach for cascading dropdown.

Ajax will call GetCityName method on code behind on Server and received information is recursively used to create City dropdown.

Please note the syntax of Select2 for cascade dropdown.

$('#ddlCountry').on("select2:select", function (event) {
        var countryParam =
            {                    
                "countryId": $("#ddlCountry option:selected").val()
            };
        $.ajax({
            url: $("#ajaxUrlGetCityName").val(),
            data: JSON.stringify({ ddlParams: countryParam}),
            type: 'POST',
            cache: false,
            contentType: 'application/json; charset=utf-8',
            dataType: "json",
            success: function (result) {
                var markup;
                var dbSelect = $('#ddlCity');
                dbSelect.empty();
                for (var i = 0; i < result.length; i++) {
                    dbSelect.append($('<option/>', {
                        value: result.City[i].Value,
                        text: result.City[i].Text
                    }));
                }
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(thrownError);
            }
        });
    });