c# - 根据在另一个 DropDown 上选择的值填充 DropDown/Select

Question

我是一名开发新手，但我偶然发现了一个我无法解决的案例。我将 ASP.NET MVC 与 C# 以及一些 javascript(JQuery、JSON...)结合使用。

我要做的是根据在 other 中选择的值填充下拉列表。这看起来很简单(我知道它很简单)，但这个特殊情况让我难以理解。我已经浪费了很多时间，但我还在摇头晃脑。如果有人可以提供帮助，我将不胜感激。

我的代码如下:

我有一个“任务”类的对象，它既有阶段又有订单。第二个下拉列表中用户可用的订单将取决于此任务在第一个下拉列表中分配到的阶段。 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 与第一个非常相似，但它的 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);
        });
    });
});