Cascade Dropdown Javascript Errors (object doesn't support property)

Cascade Dropdown Javascript Errors (object doesn't support property)

So I'm trying to implement cascading dropdowns in MVC4 using Jquery. I've
been through countless examples and have yet to find a solution that
works. I am trying the solution that is listed on Cascading drop-downs in
MVC 3 Razor view
But I keep getting the Error: Microsoft JScript runtime error: Object
doesn't support property or method 'cascade'
Here's my code.
Javascript Function:
(function ($) {
$.fn.cascade = function (options) {
var defaults = {};
var opts = $.extend(defaults, options);
return this.each(function () {
$(this).change(function () {
var selectedValue = $(this).val();
var params = {};
params[opts.paramName] = selectedValue;
$.getJSON(opts.url, params, function (items) {
opts.childSelect.empty();
$.each(items, function (index, item) {
opts.childSelect.append(
$('<option/>')
.attr('value', item.Id)
.text(item.Name)
);
});
});
});
});
};
})(jQuery);
Then you're supposed to simply link it up on the View like:
<script type="text/javascript">
$(function () {
$('#ClientId').cascade({
url: '@Url.Action("ImportList")',
paramName: 'clientProjectName',
childSelect: $('#ImportId')
});
});
</script>
<div>
Client:
@Html.DropDownListFor(x => x.ClientId, new
SelectList(Model.ClientProjects, "ClientProjectName",
"ClientProjectName"))
</div>
<div>
Imports:
@Html.DropDownListFor(x => x.ImportId,
Enumerable.Empty<SelectListItem>())
</div>
I just want a quick, easy way to get Cascading Dropdowns working, but
everything I have tried seems to not work. I am pretty new to MVC4 and
javascript so any full explanations are greatly appreciated.