javascript - 使用 JavaScript/jQuery，如何根据下拉列表中的选择过滤列表？

Question

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

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

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

Answer 1

1. 使用名为 GetFillersByCapsule(int capsuleTypeId) 的方法制作一个控制器。这应该返回 json 对象上的填充物。

2. 如果您在客户端使用 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
   });