填充一个下拉/选择的基础上选择另一个下拉列表中值 [英] 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...).

我所要做的就是根据其他选择的值来填充下拉列表。
它看似简单（我知道这是），但特定情况下的是躲避我。
我已经失去了很多时间，我仍然bonking我的头。如果有人可以帮助我会非常感激。

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.

我的code是如下：

我有类任务即同时具有相位和订单的对象。提供给所述第二下拉用户订单将取决于这个任务是在firts下拉分配给相。顺序仅仅

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)

第一个下拉使用这个IF检查一个会话为空，则procedes显示默认的消息，或将选定值作为默认值。

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"})%>
    <%} %>

第二下拉很像第一，但其的SelectList是列表的列表。每个列表contais用于第一下拉每个选择的可能的选择。不会有很多，所以不要担心。

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"})%>
  <%} %>

现在的问题是：我怎么做第二个下拉更改基于第一个下拉选择的价值它的价值？我在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.

在此先感谢您的atention。

Thanks in advance for your atention.

推荐答案

您基本上要一个JavaScript事件附加到第一下拉列表，并有jQuery的查询，Web服务（或其他方式）来获取该ID的详细信息。然后，在JavaScript您重新渲染可用的选项第二个下拉列表中。一个pretty很好的例子是这里。从例子中的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);
        });
    });
});

这篇关于填充一个下拉/选择的基础上选择另一个下拉列表中值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！