Execute script when DropDownListFor item changed ASP.Net MVC

Question

I have a DropDownListFor like this :

    <div class="drop-down-list">
        <%: Html.DropDownListFor(model => model.StageId, ViewBag.StagesList as SelectList,new { @id="stageOne"})%>
        <%: Html.ValidationMessageFor(model => model.StageId) %>
    </div>

When the selected item changed I need to fire sth like code below to go to controller, fill a viewbag and populate another DropDownListFor. Actually I want to build two cascading DropDownListFor in asp.net mvc.

  <script>
    $('#stageOne').change(function () {
        $.ajax({
            url: '/Shop/ChangeStageTwo/',
            data: { item: $("#drop-down-list").sortable('toString') },
            type: 'post',
            traditional: true 
        });

    });
  </script>

But nothing happens when the user changes the first DropDownListFor . What is the problem?? Many thanks.

Answer 1

Just as Michael_B said, I changed code to this, and the problem solved :

 $(function () {
   $('#stageOne').change(function () {
        $.ajax({
            url: '/Shop/ChangeStageTwo/',
            data: { item: $("#drop-down-list").sortable('toString') },
            type: 'post',
            traditional: true 
        });

    });
 });