views:

131

answers:

0

I have a multiselect listbox with several different values, when a user selects values from first listbox another multiselect listbox gonna be populated with different values depending on the first listbox values.

So far everything works as expected.

The problem is that i'm using a jquery plugin called dropdownchecklist that transforms the listbox to a multiselect dropdownlist that doesn't update itself with selected values from the listbox. It seems like the dropdownchecklist plugin is getting the values from the listbox before the listbox updates itself.

I'm pretty shure it is a easy problem, but I have googled, search SO and tried for a couple of hours now and I could really need some help with fresh eyes.

The code for the jquery function that is called when a selected values is changed in the first listbox is what you see below:

$("#MessageTypeId").change(function () {
        var values = $(this).val() || [];
        var url = "/TransactionHistory/FilterSearchkey/?keys=" + values;
            // call controller's action that returns values trough JSON object
            $.getJSON(url, null, function (data) {
                // Update listbox with new values and apply dropdownchecklist plugin
                $("#SearchKeysId").empty();
                $.each(data, function (index, optionData) {
                    $("#SearchKeysId").append("<option value='"
                     + optionData.Key
                     + "'>" + optionData.Description
                     + "</option>");
                });
            });
        $("#SearchKeysId").dropdownchecklist('destroy'); // Removes the first dropdownchecklist, else you got a two dropdownchecklist
        $("#SearchKeysId").dropdownchecklist({ width: 200 }); // Apply dropdownchecklist plugin
    })
    .change();