Question

我是jQuery的新手，我正在用.Net和Razor页面构建一个Webapp。我想知道应该如何尝试使表格出现在单击下拉菜单按钮或在启动时出现，然后在单击下拉菜单项时填充表格。我有2个下拉按钮，“类别”下拉列表和“子类别”下拉列表，当单击“类别”下拉项时，它已经能够填充子类别下拉列表。由于我的表格依赖于SubcategoryId以及UserId，因此我需要使其为空/不显示，直到在第二个下拉菜单中选择SubCategory为止。我有用于创建表格的html以及单击时可填充下拉按钮的jQuery，我只需要弄清楚如何在SubCategory按钮单击时填充表格，或者仅在单击子类别按钮后才显示整个html渲染。如果有一种方法可以在单击SubCategoryId按钮时为表执行html，则我希望使用它，这样我就可以避免对Model.Projects List <>的空引用，因为在SubCategory之前无法填充该空引用。按钮被点击。

选择类别之前，按

下拉按钮： https://gyazo.com/263ebfbb49232b556721c411dd94ca36

选择类别后的

DropDown按钮： https://gyazo.com/e089016757ad044769c622850d9ce5ba

这是我的jQuery，用于根据第一个下拉菜单的输入来填充第二个下拉菜单：

<span class="control-group form-group">
        <span class="controls">
            <label asp-for="CategoryId">Category:  </label>
            <select asp-for="CategoryId" asp-items="Model.categorylist">
                <option value="">---Select Category---</option>
            </select>


            <label asp-for="SubCategoryId">Subcategory:</label>
            <select asp-for="SubCategoryId"><option value="">---Select Subcategory---</option></select>
            @section scripts{
                <script>
                    $(function () {
                        $("#CategoryId").on("change", function () {
                            var categoryId = $(this).val();
                            $("#SubCategoryId").empty();
                            $("#SubCategoryId").append("<option value=''>---Select Subcategory---</option>");
                            $.getJSON(`?handler=SubCategories&categoryId=${categoryId}`, (data) => {
                                $.each(data, function (i, item) {
                                    $("#SubCategoryId").append(`<option value="${item.subCategoryId}">${item.subCategoryName}</option>`);
                                });
                            });
                        });
                    });
                </script>
            }
        </span>
    </span>

这是我要在第二个下拉菜单上执行的html：

<table class="table">
    <tr>
        <th>Project Name</th>
        <th>Project Desc</th>
        <th>File Upload</th>
        <th>SubCategoryId</th>
        <th>UserId</th>
    </tr>

   @foreach(var project in Model.Projects)
    {
        <tr>
            <td>@project.ProjectName</td>
            <td>@project.ProjectDescription</td>
            <td>@project.FileUpload</td>
            <td>@project.SubCategoryId</td>
            <td>@project.UserId</td>
        </tr>
    }
</table>

希望您能为我指出正确的方向，以解决此最终目标或可能达到相同最终结果的类似最终目标。谢谢您的时间和帮助！

如何填充表格将为空/空值，但在单击下拉列表时填充表格？

0 个答案: