使 DropDownLists 相互依赖答案

【问题标题】：Making DropDownLists depend on each other使 DropDownLists 相互依赖
【发布时间】：2014-01-15 06:19:52
【问题描述】：

在我的 MVC4 应用程序中，我有两个模型是 User 和 Schedule，看起来像这样：

public class User {

    public int UserId { get; set; }
    public string Name { get; set; }
    public string FullName { get; set; }
    public string Email { get; set; }
    public bool isAvailable { get; set; }
}

public class Schedule 
{
    public int ScheduleId{ get; set; }
    public DateTime Date { get; set; }
    public int UserId { get; set; }
    public virtual User User { get; set; }
}

现在我想创建一个页面，该页面将显示一个包含本月天数的表格，以及在列表中DropDownLists（每天）的所有用户isAvailable 为true 的表格。将使用此页面，以便管理员可以制定时间表（我也将开放以改进如何实施此页面）并在每个工作日选择一个用户。我想让它一旦在一个DropDownList 中选择了一个用户，这个用户就会从另一个DropDownLists 中消失。

Controller 和 View 现在如下所示，控制器：

public ActionResult Schedule()
    {
        ViewBag.UserId = new SelectList(db.Users, "UserId", "FullName");
        return View();
    }

查看：

@model IEnumerable<seashell_brawl_corvee.Models.Schedule>

@{
    ViewBag.Title = "Schedule";

}

<fieldset>
<legend>@ViewBag.Title</legend>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <table class="table">
        <thead>
            <tr>
                <th>Date
                </th>
                <th>Select person
                </th>
            </tr>
        </thead>

        @{ DateTime dt = DateTime.Now; }

        @for (double i = 0.0; i < 60.0; i++)
        {
            dt = dt.AddDays(1);
            if (dt.Date.DayOfWeek != DayOfWeek.Saturday &&
                dt.Date.DayOfWeek != DayOfWeek.Sunday)
            {
            <tbody>
                <tr>
                    <td>
                        @dt.Date.ToLongDateString()
                    </td>

                        <td>
                          @Html.DropDownList("UserId", String.Empty)
                        </td>               

                </tr>
            </tbody>
            }
            else
            {
            <tbody>
                <tr></tr>
            </tbody>    
            }
        }
    </table>

    @TODO: Submit button and controller POST action that reads the dates and names 
           from the dropdownlists, puts them into arrays and then into the database.
}

</fieldset>

我知道我需要 JavaScript/JSON 来使 DropDownLists 相互依赖，并且在选择它们后不再显示名称，但我不知道我将如何实现这一点。如果有人能进一步帮助我，我将不胜感激！

【问题讨论】：

一个用户一个月只能安排一次吗？
@BryanWeaver 是的，每月一次。

标签： c# javascript html json asp.net-mvc-4

【解决方案1】：

我有一种使用 JQuery 的方法，请查看以下示例： http://jsfiddle.net/vt3Ma/4/

使用 focus() 事件将恢复当前选项值和 2 个隐藏字段中的文本

$('.ddl').focus(function(){
$("#oldValue").val($(this).val());
$("#oldText").val($("option:selected",$(this)).text());

});

然后在 change() 事件上：-

1- 将下拉列表的旧更改选项添加到其他下拉列表中，因为之前选择的选项现在可供选择。

$(this).prepend("<option value='"+$("#oldValue").val()+"'>"+$("#oldText").val()+"</option>");

2- 将从所有其他下拉列表中删除新选择的选项

$("option[value='" + current.val() + "']",$(this)).remove();

【讨论】：