JQuery插件，JavaScript语法，级联下拉MVC4后续，多级级联

首先，这篇文章在MVC 3 Razor视图中的级联下拉菜单非常有帮助。我已经使用了初始语法，并使我的级联下拉菜单工作。我为控制器中调用的函数添加了更多参数，以更改列表内容。这是一个不使用"plugin"的视图

@model HolterManagementUI.Models.CrudUserViewModel
@{
ViewBag.Title = "Edit";
}
@Scripts.Render("~/bundles/jquery")
<script type="text/javascript">
$(function () {
    $('#SelectedDivisionID').change(function () {
        var selectedDivisionID = $(this).val();
        $.getJSON('@Url.Action("Regions")', { divisionId: selectedDivisionID, isActive: true }, function (regions) {
            var regionsSelect = $('#SelectedRegionID');
            regionsSelect.empty();
            $.each(regions, function (index, region) {
                regionsSelect.append(
                    $('<option/>')
                        .attr('value', region.ID)
                        .text(region.Description)
                );
            });
         var locationsSelect = $('#SelectedLocationID');
         locationsSelect.empty();
        });
    });
    $('#SelectedRegionID').change(function () {
        var selectedRegionID = $(this).val();
        $.getJSON('@Url.Action("Locations")', { regionId: selectedRegionID, isActive: true }, function (locations) {
            var locationsSelect = $('#SelectedLocationID');
            locationsSelect.empty();
            $.each(locations, function (index, location) {
                locationsSelect.append(
                    $('<option/>')
                        .attr('value', location.ID)
                        .text(location.Description)
                );
            });
        });
    });
});
</script>
<h2>Edit User</h2>
@using (Html.BeginForm())
{
<table>
<tr>
    <td>LanID</td>
    <td>
    @Html.HiddenFor(h => h.ID)
    @Html.EditorFor(h => h.LanID)</td>
</tr>
<tr>
    <td>Division</td>
    <td>
    @Html.DropDownListFor(h => h.SelectedDivisionID, new SelectList(Model.Divisions, "ID", "Description", Model.SelectedDivisionID.ToString()))
    </td>
</tr>
<tr>
    <td>Region</td>
    <td>
    @Html.DropDownListFor(h => h.SelectedRegionID,  new SelectList(Model.Regions, "ID", "Description", Model.SelectedRegionID.ToString()))
    </td>
</tr>
<tr>
    <td>Location</td>
    <td>
    @Html.DropDownListFor(h => h.SelectedLocationID,  new SelectList(Model.Locations, "ID", "Description", Model.SelectedLocationID.ToString()))
    </td>
</tr>
<tr>
    <td>Is Active</td>
    <td>@Html.EditorFor(h => h.IsActive)</td>
</tr>
</table>
<div class="buttongroup" align="left" style="margin-top: 50px">
    <input type="submit" name="submitButton" value="Save" />
    <button type="button" onclick="location.href='@Url.Action("List")'">Cancel</button>
</div>
}

我不确定如何做的是如何在重构部分添加JavaScript插件，然后如何修改它，以便我可以传递多个参数。我曾尝试将代码添加到我的项目中的单独JavaScript文件中并包含它，但随后"布线"总是中断。

这是我单独的JavaScript文件:

/*!
* DropDowns.js
* Script to manage Cascading of dropdowns
* 
* From stackoverflow.com
* https://stackoverflow.com/questions/4458970/cascading-drop-downs-in-mvc-3-razor-view
*/
(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);

这是我的视图，试图使用DropDowns.js文件:

@model HolterManagementUI.Models.CrudUserViewModel
@{
ViewBag.Title = "Create";
}
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/scripts/DropDowns.js")
<script type="text/javascript">
$(function () {
    $('#SelectedDivisionID').cascade({
        url: '@Url.Action("Regions")',
        paramName: 'divisionId',
        childSelect: $('#SelectedRegionID')
    });
    $('#SelectedRegionID').cascade({
        url: '@Url.Action("Locations")',
        paramName: 'regionId',
        childSelect: $('#SelectedLocationID')
    });
});
</script>
<h2>Create a User</h2>
@using (Html.BeginForm())
{
<table>
<tr>
    <td>LanID</td>
    <td>
    @Html.HiddenFor(h => h.ID)
    @Html.EditorFor(h => h.LanID)</td>
</tr>
<tr>
    <td>Division</td>
    <td>
    @Html.DropDownListFor(h => h.SelectedDivisionID, new SelectList(Model.Divisions, "ID", "Description"))
    </td>
</tr>
<tr>
    <td>Region</td>
    <td>
    @Html.DropDownListFor(h => h.SelectedRegionID,  Enumerable.Empty<SelectListItem>())
    </td>
</tr>
<tr>
    <td>Location</td>
    <td>
    @Html.DropDownListFor(h => h.SelectedLocationID, Enumerable.Empty<SelectListItem>())
    </td>
</tr>
</table>
<div class="buttongroup" align="left" style="margin-top: 50px">
    <input type="submit" name="submitButton" value="Save" />
    <button type="button" onclick="location.href='@Url.Action("List")'">Cancel</button>
</div>
}

,1. 我如何得到插件代码的工作?2. 如何为cascade的插件方法添加更多参数?3.这值得做吗?