Question

我是初学者，但我偶然发现了一个我无法解决的案例。我正在使用带有C＃的ASP.NET MVC加上一些javascript（JQuery，JSON ......）。

我要做的是根据其他选择的值填充下拉列表。这似乎很简单（我知道它是）但是这个特殊情况正在逃避我。我已经失去了很多时间，而且我还在磕头。如果有人可以提供帮助，我将非常感激。

我的代码如下：

我有一个“任务”类的对象，它同时具有阶段和顺序。第二个下拉列表中用户可用的订单将取决于此任务在第一个下拉列表中分配的阶段。订单只是一个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与第一个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查询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);
        });
    });
});

Answer 2

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

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

Answer 3

有一个关于如何从Stephen Walther

执行此操作的好教程

应该很容易做到

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

3 个答案: