Javascript Jquery和级联dropdownlist

问题如下：

我想当我点击一个下拉菜单时，第二个下拉菜单会改变

我在这里使用代码： 但在第一个孩子被选中后，我遇到了一个问题，那不是工作和崩溃

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

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

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

谢谢你的帮助

我的看法是：

@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>    
}

我的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; }
}

在此（感谢达林·迪米特罗夫）：

---

我无法重现这个问题。当我测试代码时，它对我有效。我在你的代码中看到的唯一问题是，你在

Html.BeginForm

调用中忘记了一个右括号。嗨，达林，问题不是右括号，我已经更新了我的帖子，我有了一个解决方案，但我不明白为什么它会起作用……如果你有想法的话：）。感谢您的帮助，但如果您不将插件调用包装到文档中。ready它将不起作用，因为当您附加它时，您的下拉列表尚未出现在DOM中。它起作用了，我更新我的帖子：）。如果您有时间，我想问最后一个问题，是否可以使用列表发送并返回Json？我找到了对我最后一个问题的回答，是的，您的函数非常令人难以置信，并且很容易修改：）。谢谢：）

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();
    }
}

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')
    }); 
});

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')
    });
});