Question

我在模型视图中有二维数组：

public class MyData
{
    public IList<Source> Sources
    { get; set; }

    // ...
}

public class Source 
{
    public string ParentName
    { get; set; }

    public IList<string> ChildNames
    { get; set; }
}

这将是大约5个父母，每个人大约有10个孩子。在页面上我需要显示2个列表：第一个包含父项，第二个包含选定的父项。

<select id="parents">
@foreach (var source in Model.Sources)
{
    <option>@source</option>
}
</select>

<select id="childs">

</select>

源在服务器端同时形成，从未修改过。显示这些列表的最佳做法是什么？我可以在客户端重绘子列表吗？如何将模型视图转换为javascript（jQuery）？像这样的C＃代码：

Model.Sources.FirstOrDefault(s => s.ParentName == selectedValue)

进入变更事件处理程序：

$("#parents").change(function () {

    var selectedValue = $("#parents").val();

    // ???
});

我很感激任何答案！

Answer 1

你可以这样做：

<select id="parents">
@foreach (var source in Model.Sources)
{
     <option>@source</option>
}
</select>

@foreach (var source in Model.Sources)
{
    <select id="@source.ParentName_children" class="childselect">
        @foreach (var child in source.ChildNames)
        {
            <option>@child</option>
        }
    </select>
}

这将为所有父母呈现一个选择列表，然后为每个父母的孩子选择一个（具有唯一ID）。然后在jQuery中你可以做这样的事情：

$("#parents").change(function () {
     var selectedValue = $("#parents").val();
     // Hide all the selects for children
      $(".childselect").hide(); 

      // show the one that belongs to this parent
     $("#" + selectedValue + "_children").show(); 
});

要确保在页面加载时并非所有子选项都可见，您可以添加此CSS规则：

.childselect{
    display: none;
}

客户端重绘依赖选择列表

1 个答案: