Jquery和级联下拉列表

Question

问题如下：

我希望当我点击一个下拉列表时，第二个下拉列表会发生变化。

我在这里使用代码： Cascading drop-downs in MVC 3 Razor view 但是我在第一个孩子之后遇到问题选择它不起作用并且崩溃。

当我使用firefox的插件firebug时，显示：

$("#TestSelected").cascade is not a function
childSelect: $('#Test2Selected')//problem here

我从未在我的控制器中使用“Niveau2”和“Niveau3”功能 我不明白为什么这不起作用，我是jquery的新手：但我需要一个解决方案。如果你有一个想法：）。

谢谢你的帮助。

我的观点是：

@model SiteWebEmpty.Models.Create.DisplayCreateAllStep
<script type="text/javascript">
    (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);

$(function () {
    $('#TestSelected').cascade({
        url: '@Url.Action("Niveau2")',
        paramName: 'niveau1',
        childSelect: $('#Test2Selected')
    });
    $('#Test2Selected').cascade({
        url: '@Url.Action("Niveau3")',
        paramName: 'niveau2',
        childSelect: $('#Test3Selected')
    }); 
});
</script>

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <fieldset>
    <legend>Create</legend>
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Step1</a></li>
            <li><a href="#tabs-2">Step2</a></li>
            <li><a href="#tabs-3">Step3</a></li>
            <li><a href="#tabs-3">AllStep</a></li>
        </ul>
        <div id="tabs-1">
            @Html.Partial("Step1", Model)
        </div>
        <div id="tabs-2">
            @Html.Partial("Step2", Model)
        </div>
        <div id="tabs-3">
        <button type="submit" name="btn" value="send" id="send">send</button>   
        </div>
        <div id="tabs-4">
        </div>
    </div>
 </fieldset>    
}

我的部分观点是，下拉列表在哪里：

@model SiteWebEmpty.Models.DisplayCreateAllStep
<fieldset>
<legend>Step 2</legend>
                @Html.DropDownListFor(test => test.Step2.TestSelected, Model.Step2.Test)
                @Html.DropDownListFor(test => test.Step2.Test2Selected, Enumerable.Empty<SelectListItem>())
                @Html.DropDownListFor(test => test.Step2.Test3Selected, Enumerable.Empty<SelectListItem>())
</fieldset>

我的控制器：

public class CreateController : Controller
{

    public ActionResult Create()
    {
        DisplayCreateAllStep allStep = new ArticleRequestDisplayCreateAllStep { Step1 = FillStep1(), Step2 = FillStep2() }; ;
        return View(allStep);
    }
    public ActionResult Niveau2(int niveau1)
    {
    //code to return json
        return View();
    }
    public ActionResult Niveau3(int niveau2)
    {
    //code to return json
        return View();
    }
}

我的Step2的控制器是：

public class DisplayCreateStep2
{
    public List<SelectListItem> Test { get; set; }
    public String TestSelected { get; set; }

    public List<SelectListItem> Test2 { get; set; }
    public String Test2Selected { get; set; }

    public List<SelectListItem> Test3 { get; set; }
    public String Test3Selected { get; set; }
}

更新

改变这个：

 $(function () {
    $('#TestSelected').cascade({
        url: '@Url.Action("Niveau2")',
        paramName: 'niveau1',
        childSelect: $('#Test2Selected')
    });
    $('#Test2Selected').cascade({
        url: '@Url.Action("Niveau3")',
        paramName: 'niveau2',
        childSelect: $('#Test3Selected')
    }); 
});

由此（感谢Darin Dimitrov）：

jQuery(document).ready(function($) {
  // Code using $ as usual goes here.

    $('#Step2_TestSelected').cascade({
        url: '@Url.Action("Niveau2")',
        paramName: 'niveau1',
        childSelect: $('#Step2_Test2Selected')
    });
    $('#Step2_Test2Selected').cascade({
        url: '@Url.Action("Niveau3")',
        paramName: 'niveau2',
        childSelect: $('#Step2_Test3Selected')
    });
});