c# - 根据在另一个下拉菜单中选择的值填充下拉菜单/选择

Question

我是一名初学者开发人员，但我偶然发现了一个我无法解决的案例。 我使用 ASP.NET MVC 和 C# 以及一些 javascript(JQuery、JSON...)。

我要做的是根据其他中选择的值填充下拉列表。 这看起来很简单(我知道确实如此)，但这个特殊情况却让我困惑。 我已经浪费了很多时间，但我仍然在摇头。如果有人能提供帮助，我将不胜感激。

我的代码如下:

我有一个“任务”类的对象，它同时具有阶段和顺序。第二个下拉列表中用户可用的订单将取决于第一个下拉列表中此任务分配到的阶段。 Order 只是一个 Int32(来自计划中的订购的订单，而不是来自业务订单的订单)

第一个 DropDown 使用此 IF 检查 session 是否为空，然后继续显示默认消息或将所选值设置为默认值。

<%
 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 与第一个 DropDown 非常相似，但它的 SelectList 是一个列表列表。每个列表都包含第一个下拉列表中每个选项的可能选择。不会有很多，所以不用担心。

<%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 查询 Web 服务(或其他服务)以获取该 ID 的详细信息。然后在 javascript 中，使用可用选项重新渲染第二个下拉列表。一个很好的例子是 here 。该示例的 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);
        });
    });
});