使用C尖銳對象動態填充選擇

Question

我有一個自定義對象（書）列表，並且我想根據第一個下拉菜單中選擇的圖塊填充第二個選擇框。 我已經看到了許多關於如何使用靜態類型的列表的答案，但是沒有看到來自asp.net對象的答案。

public class Book
{

    public string Title { get; set; }

    public List<string> Chapter { get; set; }

}

Model.books是上面的Book對象的列表。

在cshtml中：

<div class="form-group">
                        <label asp-for="Book.Title" class="control-label">Title</label>
                        <select id="title-select" asp-for="Book.Title" class="form-control">
                            @foreach (var item in Model.books)
                            {
                                <option value="@item">
                                    @Html.DisplayFor(modelItem => item.Title)
                                </option>
                            }
                        </select>
                    </div>

<div class="form-group">
                        <label asp-for="Book.Chapter" class="control-label">Chapter</label>
                        <select id="chapter-select" asp-for="Book.Chapter" class="form-control">
                            @foreach (var item in chapters?)
                            {
                                //Chapter select based on Title chosen above
                            }
                        </select>
                    </div>

JQuery的：

    $('#title-select').on('change', function () {
        var value = this.value

//How to pass the book.chapter object into here to populate the dropdown list


    });

書或章節不多，因此僅通過所有書而不是使用Ajax也許值得。 我主要不確定如何首先將我的Books列表添加到JQuery（我不習慣於Web開發）。

Answer 1

您可以將與章節關聯的書名存儲為章節下拉列表中選項元素的data-*屬性。

@foreach (var book in Model.books)
    @foreach (var item in book.Chapter)
      {
         <option data-book-title="@book.Title">@item</option>
      }
}

然后使用“書”下拉列表中“選定書”元素的值來過濾與data屬性匹配的章節以啟用它們：

$('#title-select').on('change', function () {
  var bookValue = this.value;
  $('#chapter-select option').hide().filter(function(){
    return $(this).data('book-title') == bookValue;
  }).show();
});