Javascript 如何基于选定的下拉项生成项目列表？

我想根据用户选择的下拉选项筛选项目列表

这是我的下拉列表：

<select class="form-control" onchange="loadFilteredList()" id="conditionSelect">
      <option disabled value="" selected="selected">Please select a filter</option>
      <option>Under 18</option>
      <option>Above 18</option>
</select>

请选择一个过滤器
18岁以下
18岁以上

这是我用来生成列表的循环：

<table class="table table-hover" id="ageOverview">
    <tr>
        <th>Col1</th>
        <th>Col2</th>
        <th>Col3</th>
    </tr>
    @foreach (var person in ViewBag.persons)
    {
        <tr>
            <td>@person.FirstName</td>
            <td>@person.MiddleName</td>
            <td>@pperson.LastName</td>
        </tr>
    }
</table>

可乐
可乐
可乐
@foreach（ViewBag.persons中的变量person）
{
@人名
@person.MiddleName
@佩尔森姓
}

每次用户从下拉列表中选择一个选项时，我都要加载正确的列表

包含数据的ViewBag在我拥有的控制器中填充。目前，下拉列表中第一个选项有一个ViewBag，第二个选项有一个ViewBag。我不知道这是否是正确的方法，但我对这方面非常陌生，希望得到一些建议

---

提前谢谢

在不考虑这里的Vue标记的情况下，我管理大型（超过几百个DOM元素，并且您提到了1000个+）对象的典型方法是将其与小控制器操作挂钩，以避免污染DOM，这会大大降低速度

不过，我们必须考虑各种选择，因为你会在某个地方受到打击。你必须决定在哪里。大量DOM元素与请求的带宽。将数据存储在会话中，以便可用于多个post请求或重新查询生成的数据

因此，出于这里的目的，我假设我们不想在DOM中有大量的项，而只想显示/隐藏，这是最简单的方法，但当您开始添加项和组合，或者移动用户尝试加载页面等时，这并不好。我还被您的函数名loadFilteredList着色，它对我来说只是喊出“添加另一个过滤器”很快就会有人提出要求

这是基本设计：

控制器方法将此处的表内容作为部分视图返回

它（控制器方法）有一个作为过滤器选项的参数。（以后可以添加更多；关键是，控制器正在进行过滤和发送数据）

然后，onchange的javascript只是向控制器发出一个post请求，以获取新的过滤数据。您可以使用jquery或vanilla根据需要设置html内容。您的控制器获取用于筛选的新数据或使用会话。这里什么最适合你的需要。不过，您不需要ViewBag，它不适用于这种情况

---

这种设计的缺点是在后台为每个过滤器向服务器发送一个新的请求。这样做的好处是希望您的有效负载足够小，因此这样做的成本不会像返回所有可能的行那样高，这样就可以在客户端对其进行过滤。

这取决于其中包含多少项。如果没有太多的选择，只需将其弹出到客户端位置，如脚本变量或隐藏输入，并使用它在客户端上进行筛选。如果有很多选项，并且会污染您的DOM并影响加载时间，请对控制器进行异步调用，记住，视图包是服务器端的。就MVC而言，您无法对dropdownselect事件做出反应并对其进行任何处理。您需要一个新的post请求、ajax或其他方法来从服务器获取新值（针对web表单的回发）。可能超过1000人。。我的控制器中也有数据。我如何在我的视野内尽可能高效地实现它？有代码片段吗？嗯，viewbag只对一个请求有效。所以，它不是一个真正的存储这样东西的地方，因为您只需要在每次请求时重新生成它，而这种东西通常来自数据库或其他昂贵的地方。另外，我不确定Vue.js是否会像我习惯的那样（mvc+jquery）。我会给你一些基本的建筑理念作为答案，所以我们不杀评论，嗯，这里有一些好的东西在这里考虑。我的控制器中有一些方法，可以分别为每个方法获取正确的过滤器数据。我不知道怎样才能把它设置得尽可能有效。。你有什么代码片段或者我可以深入研究的东西吗？