Заполните DropDown / Select на основе значения, выбранного в другом DropDown

Question

Я начинающий разработчик, но я наткнулся на случай, который не могу решить. Я использую ASP.NET MVC с C # плюс некоторый JavaScript (JQuery, JSON ...).

Что мне нужно сделать, это заполнить раскрывающийся список на основе значения, выбранного в другом. Это кажется простым (и я знаю, что это так), но этот частный случай ускользает от меня. Я потерял много часов, и я все еще склоняю голову. Если кто-нибудь может помочь, я был бы очень благодарен.

Мой код выглядит следующим образом:

У меня есть объект класса "Задача", который имеет Фазу и Порядок. Заказы, доступные пользователю во втором раскрывающемся списке, будут зависеть от этапа, на который была назначена эта задача в раскрывающемся списке. Заказ - это просто Int32 (заказ из заказа по расписанию, а не из бизнес-заказа)

Первый DropDown использует этот IF для проверки, является ли сеанс пустым, затем переходит к отображению сообщения по умолчанию или отображению выбранного значения по умолчанию.

<%
 if (TempData["TaskObject"] != null)
    {
        var Phases = new SelectList(ViewData["phaseList"] as List<Phase>, "Phase_ID", "Phase_Name", ((Task)TempData["TaskObject"]).Phase_ID.ToString());

    %>
        <%=Html.DropDownList("Phase_ID", Phases, new { @class = "textbox"})%>
   <%}%>
   <%else
      {%>
        <%=Html.DropDownList("Phase_ID", (new SelectList((List<Phase>)ViewData["phaseList"], "Phase_ID", "Phase_Name")),
                                                 "Please Choose...",
                                                 new { @class = "textbox"})%>
    <%} %>

Второй DropDown очень похож на первый, но его SelectList представляет собой список списков. Каждый список содержит возможные варианты для каждого варианта в первом DropDown. Там не будет много, так что не беспокойтесь об этом.

<%if (TempData["TaskObject"] != null)
    {
        var orderList = (ViewData["orderList"] as List<List<int>>)[0]; 
        var orders = new SelectList(orderList, ((Task)TempData["TaskObject"]).Phase_ID.ToString());

 %>
       <%=Html.DropDownList("Order_ID", orders, new { @class = "textbox"})%>
  <%}%>
<%else
    {%>
        <%=Html.DropDownList("Order_ID", (new SelectList((List<int>)ViewData["phaseList"], "Phase_ID", "Phase_Name")),
                                            "Please Choose...",
                                            new { @class = "textbox"})%>
  <%} %>

Теперь возникает вопрос: как заставить второй DropDown изменить свои значения в зависимости от выбранного значения в первом DropDown? Я очень плохо разбираюсь в JavaScript (хотя начал изучать). Мы используем JQuery, JSON в проекте.

Заранее благодарим за внимание.

Answer 1

В основном вы хотите прикрепить событие javascript к первому выпадающему списку и запросить jquery к веб-сервису (или другому), чтобы получить подробную информацию об этом идентификаторе. Затем в javascript вы перерисовываете второй выпадающий список с доступными опциями. Очень хороший пример: здесь . Извлечение Javascript из примера ниже:

$(function() {
        $.getJSON("/Home/Countries/List", function(data) {
            var items = "---------------------";
            $.each(data, function(i, country) {
                items += "" + country.Text + "";
            });
            $("#Countries").html(items);
        });

    $("#Countries").change(function() {
        $.getJSON("/Home/States/List/" + $("#Countries > option:selected").attr("value"), function(data) {
            var items = "---------------------";
            $.each(data, function(i, state) {
                items += "" + state.Text + "";
            });
            $("#States").html(items);
        });
    });
});

Answer 2

Есть хорошее руководство о том, как это сделать.

это должно быть легко сделать

Answer 3

Вам нужно перехватить первое событие изменения DropDown. и в этом заполните / выберите нужное вам значение.

$('#Phase_ID').change(function(){
        var t = $(this);
        $('#Order_ID').val(t.val());  // this is only for example.
});