javascript - 禁用多个下拉列表中的选定项目

Question

设置

我有一个完全相同的下拉列表列表(想想网格中的行项目)。它们可以动态添加，并且都包含相同的项目列表。我的客户要求在一个列表中选择的项目应在所有其他列表中禁用。

一切正常，除了新添加的列表没有禁用其项目(现有的列表有)。

代码

这被分解为一系列函数调用，但我将其放在此处以便于查看:

function DoTheStuff()
{
   enableAllTheDropDownItems(); //This works

   var allLists = $(".fooSelections");
   allLists.each(function(itemIndex, selectList){
      var selectedItems = $(".fooSelections option[selected='selected']");

      selectedItems.each(function(index, element) {
          var selectedValue = $(element).val();
          var parent = $(element).parent();

          //skips an item if it is the selectedItem of the current list
          if(parent.is(selectList)){  
              return true;
          }

          $("option[value*='" + selectedValue + "']", selectList).attr('disabled', 'disabled');

      });
   });

}

我使用模板(编辑器/显示)来显示此部分 View ，但创建每个选择列表的 Razor 语法本质上如下所示:

@Html.DropDownListFor(m => m.FooId, new SelectList(Model.Foos, "FooId", "FooName", Model.FooId), new { @class = "fooSelections" }) 

处理程序

我在添加记录和任何选择列表的更改事件的 ajax 调用中调用它。正如我之前所说，它似乎适用于加载部分 View (asp.NET MVC 4)时存在的任何列表，但不适用于动态添加的项目(它们的列表已填充，但所有项目均已启用)。即使添加第二个动态项目，第一个动态项目(在不同的操作中添加)也不会禁用其项目。

问题

有人看到我错过了什么吗？或者有更好的方法来完成同样的事情吗？

编辑:添加了罗宾捕获的缺失括号。

Answer 1

我假设您正在使用 razor ajax 辅助方法来执行 ajax 调用。

在 ajax 帮助器方法 @Ajax.ActionLink 中，您可以提供一个 AjaxOptions 对象，您可以在其中设置要在 OnComplete 属性上执行的 JS 方法

示例:

@Ajax.ActionLink("linkText", "actionName", new AjaxOptions {UpdateTargetId = "DomID", OnComplete = "DoTheStuff" }) 

如果您没有使用ajax助手并使用 native ajax调用或jquery ajax调用，只需在ajax成功回调中调用“DoTheStuff”方法即可。

我改进了你的例子并用 fiddle 测试了它。请查看http://jsfiddle.net/eJudx/