根据在另一个 DropDown 上选择的值填充 DropDown/Select [英] Populate a DropDown/Select based on the value chosen on another DropDown

问题描述

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

I'm a beginner developer but I stumbled across a case I can't solve. I'm using ASP.NET MVC with C# plus some javascript (JQuery, JSON...).

我要做的是根据其他中选择的值填充下拉列表.这看起来很简单(我知道它很简单)但是这个特殊情况让我望而却步.我已经失去了很多小时，但我仍然在摇头.如果有人可以提供帮助，我将不胜感激.

What I have to do is to populate a dropdown based on the value chosen in other. It seems simple (and I know it is) but this particular case is eluding me. I've lost many hours and I'm still bonking my head. If anyone can help I'd be very grateful.

我的代码如下:

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

I have an object of the class "Task" that have both a Phase and an Order. The Orders available to the user in the second dropdown will depend on the Phase this Task was assigned to in the firts dropdown. Order is merely an Int32 (order from ordering in a schedule, not from business order)

第一个 DropDown 使用这个 IF 来检查会话是否为空，然后继续显示默认消息或将选定的值设为默认值.

The First DropDown uses this IF to check if a session is null, then procedes to show a default message or bring a selected value as default.

<%
 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 中每个选项的可能选项.不会有很多，所以不用担心.

The second DropDown is much like the first, but its SelectList is a list of lists. Each list contais the possible choices for each choice in the first DropDown. There won't be many, so don't worry about it.

<%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.

The question now is: how do I make the second DropDown change its values based on the selected value in the first DropDown ? I'm very poor at JavaScript (started studying though). We're using JQuery, JSON at the project.

预先感谢您的关注.

推荐答案

您基本上希望将 javascript 事件附加到第一个下拉列表，并让 jquery 查询 Web 服务(或其他)以获取该 ID 的详细信息.然后在 javascript 中使用可用选项重新渲染第二个下拉列表.一个很好的例子是这里.示例中的 Javascript 摘录如下:

You basically want to attach a javascript event onto the first drop list and have jquery query a web service (or other) to get the details for that ID. Then in javascript you re-render the second drop list with the available options. A pretty good example is here. Javascript extract from the example is below:

$(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);
        });
    });
});

这篇关于根据在另一个 DropDown 上选择的值填充 DropDown/Select的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！