Asp.net MVC2: filling cascading DDL using Ajax

[youpi sarah]

I do not happen to know why this code does not work
the first list is filled with success but when I select an element nothing has changed

[B]controller[/B]:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcGestionEcole.Models;

namespace MvcGestionEcole.Controllers
{
    public class DevoirController : Controller
    {
        //
        // GET: /Devoir/

        public ActionResult Index()
        {MvcGestionEcole.Models.NoteModel.Repository2 Repository = new MvcGestionEcole.Models.NoteModel.Repository2();
            List<SelectListItem> items = new List<SelectListItem>();
            items= Repository.GetNiveaux();
            ViewData["Niveaux"] = items;

            return View();
        }
        public JsonResult  ListClasses(string id)
        {
            gestionecoleEntities db= new gestionecoleEntities();
            List<SelectListItem> items = new List<SelectListItem>();
            var v = (from p in db.classe
                     where p.niveau_scolaire.Libelle_NS == id
                     select new SelectListItem
                     {
                         Text = p.Libelle_C,

                         Value = p.Libelle_C
                     });
            //items.Add(v.ToList());
            return this.Json(v.ToList(), JsonRequestBehavior.AllowGet);
        }

    }
}
/////////
[B]View[/B]:
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
 ListeNS_DEV
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<%--<script type="text/javascript" src="/Scripts/fillSelect.js"></script>--%>
 
 
    <h2>ListeDesNiveauScolaire</h2>
    <h2><%= Html.Encode(ViewData["Message"]) %></h2>
     <% using (Html.BeginForm()) {%>
        <%: Html.ValidationSummary(true) %>

        <fieldset>
            <legend>Fields</legend>
             <p>
        <%: Html.ActionLink("Create New", "Create") %>
    </p>
                <%: Html.DropDownList("Niveaux")%>
                <br/>
              <select id="Classes" name="Classes" ></select>

        </fieldset>
<% } %>

 <script type="text/javascript">
     $(function () {
         $('#Niveaux').change(function () {
             $.getJSON("http://localhost:1903/Devoir/ListClasses/" + $(this).val(),
              function (data) { $("#Classes").fillSelect(data); }
              );
         })
     });
     
    </script>



</asp:Content>


<asp:Content ID="Content3" ContentPlaceHolderID="head" runat="server">
</asp:Content>

<asp:Content ID="Content4" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
</asp:Content>
/////////////////////
[B]fillSelect.js[/B]
$.fn.clearSelect = function () {
    return this.each(function () {
        if (this.tagName == 'SELECT')
            this.options.length = 0;
    });
}

$.fn.fillSelect = function (data) {
    return this.clearSelect().each(function () {
        if (this.tagName == 'SELECT') {
            var dropdownList = this;
            $.each(data, function (index, optionData) {
                var option = new Option(optionData.Text, optionData.Value);

                if ($.browser.msie) {
                    dropdownList.add(option);
                }
                else {
                    dropdownList.add(option, null);
                }
            });
        }
    });
}

[r035198x]

1.) Use code tags when posting code.
2.) Do some basic debugging on your own first. Put alerts in your javascript and see if the Javascript is being called at all. Also put some WriteLine statements in the server code to see if it's being called at all and print out the values returned by the server code. That's how you narrow down the source of the problem.