Заполните раскрывающийся список Dynami c с помощью jquery

Question

Я впервые здесь что-то спрашиваю. Кроме того, я учусь использовать JS, поэтому я пытаюсь создать раскрывающийся список Dynami c, который зависит от другого значения, выбранного в другом раскрывающемся списке. Проблема в том, что когда я выбираю значение для первого раскрывающегося списка, я получаю невидимые поля во втором раскрывающемся списке (и эти поля не соответствуют количеству вариантов, которые у меня есть). Я пытался решить проблему, но не знаю, что делать. Важно то, что мой код основан на другом коде из http://highoncoding.com/Articles/770_Implementing_Dynamic_DropDownList_in_ASP_NET_MVC_3_Framework.aspx

Модель профиля:

        [Required(ErrorMessage = "Please provide your name")]
        [Display(Name = "Name")]
        public string name { get; set; }

        [Required(ErrorMessage = "Please provide your lastname")]
        [Display(Name = "Last Name")]
        public string lastName { get; set; }

        [Display(Name = "Birthdate")]
        [DataType(DataType.Date)]
        public string birthDate { get; set; }

        [Display(Name = "Age")]
        public int age { get; set; }

        [Required(ErrorMessage = "Please provide the city where you live")]
        [Display(Name = "City")]
        public string addressCity { get; set; }

        [Required(ErrorMessage = "Please provide the country where you live")]
        [Display(Name = "Country")]
        public string addressCountry { get; set; }

        [Display(Name = "Hobbies")]
        public string hobbies { get; set; }

        [Display(Name = "Languages")]
        public string languages { get; set; }

        [Required(ErrorMessage = "Please provide your e-mail")]
        [DataType(DataType.EmailAddress)]
        [Display(Name = "Email")]
        public string email { get; set; }

        [Required(ErrorMessage = "Please provide your mobile number")]
        [Display(Name = "Mobile")]
        public string mobile { get; set; }

        [Required(ErrorMessage = "Please enter your job title")]
        [Display(Name = "Job")]
        public string job { get; set; }

        [Display(Name = "Member rank")]
        public string memberRank { get; set; }

        [Display(Name = "Points")]
        public int points { get; set; }

        [Required(ErrorMessage = "Please describe your skills")]
        [Display(Name = "Skills")]
        public string skills { get; set; }

        public int articleCount { get; set; }

        public List<SelectListItem> ProfileList { get; set; }

        private List<SelectListItem> categories = new List<SelectListItem>();
        private List<SelectListItem> values = new List<SelectListItem>();

        [Required(ErrorMessage = "Please select a category")]

        public string selectedCategory { get; set; }
        [Required(ErrorMessage = "Please select a category")]

        public string selectedValue { get; set; }




        public List<SelectListItem> ValuesList
        {
            get { return values;  }
        }

        public List<SelectListItem> CategoryList
        {
            get
            {
                categories.Add(new SelectListItem() { Text = "Country", Value = "1" });
                categories.Add(new SelectListItem() { Text = "Skills", Value = "2" });
                categories.Add(new SelectListItem() { Text = "Languages", Value = "3" });
                categories.Add(new SelectListItem() { Text = "Hobbies", Value = "4" });
                return categories;

            }
        }


    }

Контроллер профиля:

        {
            return View(new ProfileModel());
        }

        [HttpPost]
        public ActionResult Report(ProfileModel smodel)
        {
            return View();
        }

        public string GetValuesCategory(string id)
        {
            //get the products from the repository
            var products = new List<SelectListItem>();

            if(id == "1")
            {
                products.Add(new SelectListItem() { Text = "Costa Rica", Value = "1" });
                products.Add(new SelectListItem() { Text = "Mexico", Value = "2" });
            }

            else if (id == "2")
            {
                products.Add(new SelectListItem() { Text = "Networking", Value = "1" });
                products.Add(new SelectListItem() { Text = "DataBases", Value = "2" });
            }

            else if(id == "3")
            {
                products.Add(new SelectListItem() { Text = "English", Value = "1" });
                products.Add(new SelectListItem() { Text = "Italian", Value = "2" });
            }
            else if(id == "4")
            {
                products.Add(new SelectListItem() { Text = "Sports", Value = "1" });
                products.Add(new SelectListItem() { Text = "Movies", Value = "2" });
            }
            return new JavaScriptSerializer().Serialize(products);
        }

Наконец, мой отчет выглядит так:

{
    @Html.AntiForgeryToken()

<div class="form-horizontal">
    <h4>Create Article</h4>
    <hr />
    <div class="form-group">
        <div class="col-md-10">
            <label class="control-label col-md-2"></label> @ViewBag.Message
        </div>
    </div>

    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    @*<div class="form-group">
            @Html.LabelFor(model => model.name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.name, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.name, "", new { @class = "text-danger" })
            </div>
        </div>*@



    <div class="form-group">
        @Html.LabelFor(model => model.selectedCategory, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownListFor(model => model.selectedCategory, new SelectList(Model.CategoryList, "Value", "Text"), "--Please select a topic--", new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.selectedCategory, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.selectedValue, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownListFor(model => model.selectedValue, new SelectList(Model.ValuesList, "Value", "Text"), "--Please select a topic--", new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.selectedValue, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Save" class="btn btn-primary" />
        </div>
    </div>
</div>
}

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $("#selectedCategory").change(function () {
            var url = '@Url.Action("GetValuesCategory", "Profile")';
            var data = { id: $(this).val() };
            $.get(url, data,
                function (values) {


                    var ddlSelectedValue = $("#selectedValue");
                    ddlSelectedValue.empty()

                    //populate products
                    for (i = 0; i < values.length; i++) {

                        $("<option/>").val(values[i].Value).text(values[i].Text).appendTo("#ValuesList");
                    }
                });
        });
    });
</script>```