根据在另一个 DropDown 上选择的值填充 DropDown/Select答案

【问题标题】：Populate a DropDown/Select based on the value chosen on another DropDown根据在另一个 DropDown 上选择的值填充 DropDown/Select
【发布时间】：2010-02-01 02:36:37
【问题描述】：

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

我要做的是根据在 other.xml 中选择的值填充下拉列表。看起来很简单（我知道它很简单），但这个特殊情况让我难以理解。我已经失去了很多小时，但我仍然在摇头。如果有人能提供帮助，我将不胜感激。

我的代码如下：

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

First 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。

提前感谢您的关注。

【问题讨论】：

这个重复：stackoverflow.com/questions/1976981/…

标签： c# jquery asp.net-mvc json drop-down-menu

【解决方案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);
        });
    });
});

【讨论】：

【解决方案2】：

您需要捕获第一个 DropDown 的更改事件。并在此填充/选择您需要的值。

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

【讨论】：

我该怎么做？我是 n00b，对不起。

【解决方案3】：

有一个很好的教程关于如何做到这一点来自Stephen Walther

应该很容易做到

【讨论】：