Updating Html.Dropdownlists using JQuery

Question

I found this solution on here http://stackoverflow.com/questions/2782815/how-to-update-strongly-typed-html-dropdownlist-using-jquery and am trying to implement it, but something is bugged in it.

$(function() {
    $('#cid').change(function() {
        var selectedCompany = $(this).val();
        var ddl = $("#foid");
        $.post("/TimeTracking/FilterFieldOffices", { companyId: selectedCompany }, function (data) {
            $(ddl).loadSelect(data);
        });
    });
});

(function($) {
    $.fn.emptySelect = function() {
        return this.each(function() {
            if (this.tagName == 'SELECT') this.options.length = 0;
        });
    }

    $.fn.loadSelect = function(optionsDataArray) {
        return this.emptySelect().each(function() {
            if (this.tagName == 'SELECT') {
                var selectElement = this;
                $.each(optionsDataArray, function(index, optionData) {
                    var option = new Option(optionData.Text, optionData.Value);

                    if ($.browser.msie) {
                        selectElement.add(option);
                    }
                    else {
                        selectElement.add(option, null);
                    }
                });
            }
        });
    }
})(jQuery);

My controller returns a select list of what i want.

public ActionResult FilterFieldOffices(int companyId = 0)
    {
        IList<FieldOffice> list = _fodp.GetFieldOfficesForCompany(companyId);

        var returnList = new SelectList(list, "Id", "FacilityName");

        return Json(returnList);
    }

I know the .change function is firing by placing alerts, and i know that my controller function is being called through breakpoints, so that narrows it down to the loadselect function, however i cant narrow it down anymore, since no alerts will fire within the load select function. I dont have enough experience with JQuery to form an opinion on whats wrong. So im asking if anyone has had any success on what im trying to do, or if you can see something wrong with the code. And before anyone asks, yes i have checked the brackets.

edit Forgot to mention that i checked the error console for firefox and i get the error:

$(ddl).loadSelect is not a function.

edit Found a resource that mentions that the error i described arises when you have two conflicting frameworks. So i put in jQuery.noConflict(); and it still does not work.

Answer 1

Very bizzare, but i came up with a solution that i can break point through.

<script type="text/javascript">

        $(function () {
            $('#cid').change(function () {
                var coid = $(this).val();
                $.post("/TimeTracking/FilterFieldOffices", { companyId: coid }, function (data) {
                    $("#foid").loadSelect(data); 
                });
            });
        });

        $(function () {
            $.fn.loadSelect = function (data) {
                return this.each(function () {
                    this.options.length = 0;
                    $.each(data, function (index, itemData) {
                        var option = new Option(itemData.Text, itemData.Value);
                        this.add(option);
                    });
                });
            };
        });

    </script>

All i had to do was to wrap the function that wasnt being called in a $(function() { //Code here }); However im still having some trouble. I made a new page for it.

http://stackoverflow.com/questions/3965283/refreshing-a-dropdownlist-after-elements-have-been-reset