Jquery и каскадный выпадающий список

Question

Проблема заключается в следующем:

Я хотел бы, чтобы при нажатии на одно раскрывающееся меню менялось второе раскрывающееся меню.

Я использую код здесь: Каскадные раскрывающиеся списки вMVC 3 Razor view , но у меня есть проблема после того, как первый childSelected выбрал, это не работа и сбой.

Когда я использую аддон firebug firefox, это отображение, которое:Я никогда не захожу в функции «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>    
}

Мое частичное представление: где выпадающий список:

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

этим (спасибо Дарину Димитрову):

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