根据先前的选择禁用选项

我有四个标签。 它们如下： 

  Select Milk Eggs Cheese Butter Pizza   Select Milk Eggs Cheese Butter Pizza   Select Milk Eggs Cheese Butter Pizza   Select Milk Eggs Cheese Butter Pizza

这四个应该具有独特的选择，尽管它们具有相同的项目集。 所以使用jQuery，如何禁用已选择的选项？ 确切地说，我需要从标签中获取四个值。

解决方案和问题

当前的问题有一个解决方案，但它有一个限制。 检查我的答案以获得解决方案。

此解决方案不可扩展。 如果有四个 ，则应该有四个变量，并且手动过程使它们变得乏味。 期待更好的解决方案。

每次选择更改时，只需遍历每个选项，然后在值匹配的所有其他选择中禁用该选项： 

 $('select').on('change', function() { /* enable any previously disabled options */ $('option[disabled]').prop('disabled', false); /* loop over each select */ $('select').each(function() { /* for every other select, disable option which matches this this.value */ $('select').not(this).find('option[value="' + this.value + '"]').prop('disabled', true); }); });

这是一个小提琴

如果我有一组已知的有限数据，比如我有四个选项，我就可以这样做。

伪代码

  1. 禁用所有标记并仅启用第一个。
  2. 更改 ，启用下一个 ，并禁用当前的值选项。
  3. 将当前的值保存到适当的变量中。
  4. 当下一个更改时，禁用之前的 ，以便不更改所选的选项。
  5. 随着值的增加，重复其余部分。

jQuery代码 

 $(document).ready(function(){ var a, b, c, d; $("#b, #c, #d").prop("disabled", true); $("#a").change(function(){ a = $(this).val(); $("#b").find('option[value="' + a + '"]').prop("disabled", true); $("#b").prop("disabled", false); }); $("#b").change(function(){ b = $(this).val(); $("#a").prop("disabled", true); $("#c").find('option[value="' + a + '"]').prop("disabled", true); $("#c").find('option[value="' + b + '"]').prop("disabled", true); $("#c").prop("disabled", false); }); $("#c").change(function(){ c = $(this).val(); $("#a").prop("disabled", true); $("#b").prop("disabled", true); $("#d").find('option[value="' + a + '"]').prop("disabled", true); $("#d").find('option[value="' + b + '"]').prop("disabled", true); $("#d").find('option[value="' + c + '"]').prop("disabled", true); $("#d").prop("disabled", false); }); $("#d").change(function(){ d = $(this).val(); $("#a").prop("disabled", true); $("#b").prop("disabled", true); $("#c").prop("disabled", true); }); $("#reset").click(function(){ $("#a").prop("disabled", false); $("#b, #c, #d").prop("disabled", true); $("#a, #b, #c, #d").val(0); return false; }); });

此解决方案的问题：

此解决方案不可扩展。 如果有四个 ，则应该有四个变量，并且手动过程使它们变得乏味。 期待更好的解决方案。

小提琴： http ： //jsfiddle.net/praveenscience/D5ZSk/

不确定我完全理解你的问题，但你可以这样做：

HTML

JS 

 $(document).ready(function () { $("select").on("change", function () { // Enable all options $("option").prop("disabled", false); // Get an array of all current selections var selected = []; $("select").each(function () { selected.push($(this).val()); }); // Disable all selected options, except the current showing one, from all selects $("select").each(function () { for (var i = 0; i < selected.length; i++) { if (selected[i] != $(this).val()) { $(this).find("option[value='" + selected[i] + "']").prop("disabled", true); } } }); }); });

您所做的是将所选选项保存在数组中，并在其他selects禁用这些选定的选项。

有关示例，请参阅此FIDDLE 。

这是您真正需要数据模型的地方。 在幕后，您只需要一个包含项目列表的对象，以及是否选择该项目的bool。 然后，每个选项列表将与该列表绑定。 如果项目的bool值为false，则每个项目仅显示其列表中的项目。 

 var allItems = [{item:"eggs",isSelected:false}, {item:"pizza",isSelected:false}, {item:"cheese",isSelected:false}, {item:"milk",isSelected:false} ];

所有选项控件都与该列表绑定。 将项目加载到选项控件时，会有javascript检查每个值以查看isSelected是否为false。 仅当它为false时，选项控件才会在其列表中显示该项。

这在Angular中会容易得多。

Interesting Posts