使用JavaScript/jQuery，如何根据下拉列表中的选择筛选列表？

以下是我的应用程序的屏幕截图：

您看到的填充物列表来自数据库，并且都与多个胶囊相关。我永远不想展示所有的填充物。我只想显示基于所选胶囊的填充物。有4个胶囊供用户选择。例如，当用户选择0胶囊时，我希望填充列表更改为仅显示与0胶囊相关的填充。其他胶囊也一样

动态修改填充列表以仅显示基于所选胶囊的填充物的最佳方法是什么？我是否要调用我的C方法来检索填充列表并传入所选的胶囊，这将涉及回发？还是有更好的方法通过客户端实现

使用名为GetFillersByCapsuleint的方法创建控制器 胶囊类。这将返回json对象上的填充符。 如果您在客户端使用jQuery，那么应该编写一个函数，对该控制器方法进行ajax调用。将调用绑定到document.ready和下拉更改。大概是这样的：

<script>
var dropdown = $("#dropdownId"); //Declare this first so you don't have to search the DOM each time
function getFillers(){
   $.ajax("yourControllerMethodUrlHere", {
    data: {id: dropdown.val()}, 
    type: "GET",
    contentType: "application/json",
    dataType: "json",
    success: function (result) {
       //Use the resulting JSON here to repopulate the list containing the fillers
    },
}
$(document).ready(function(){
     fill
});

---

将胶囊类型作为data-*属性添加到填充项。有了这些信息，你可以很容易地过滤列表。在选择胶囊之前，你想让填充物可见吗？我会使用带有子操作的分部来渲染填充物。在胶囊的更改事件中，做出Ajax加载语句忘记提及。如果您使用的是常规MVC控制器，则GetFillersByCapsule方法应将结果序列化为JSON。最简单的方法就是制作一个自动序列化的WebAPI控制器。这里的例子：这里：