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

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');

      });
   });

}

我正在使用模板（编辑器/显示）来显示此部分视图，但实际上创建每个选择列表的 Razor 语法如下所示：

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

处理程序

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

问题

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

编辑：添加了 Robin 抓到的缺失括号。

Answer 1

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

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

例子：

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

如果您没有使用 ajax 助手，而是使用原生 ajax 调用或 jquery ajax 调用，只需在 ajax 成功回调中调用“DoTheStuff”方法。

我改进了您的示例并在小提琴中对其进行了测试。请看http://jsfiddle.net/eJudx/