javascript - 我将如何验证选择子集中的唯一选择？

Question

我有这个动态生成的代码。

<p>
   Class Choices 1 </br>
   <select name="1_option_1">
      <option value=4>2x3 Study Time</option>
      <option value=5>2x3 Science Time</option>
      <option value=6>2x3 Math Time</option>
   </select>
   choice 1 </br>
   <select name="2_option_1">
      <option value=4>2x3 Study Time</option>
      <option value=5>2x3 Science Time</option>
      <option value=6>2x3 Math Time</option>
   </select>
   choice 2 </br>
   <select name="3_option_1">
      <option value=4>2x3 Study Time</option>
      <option value=5>2x3 Science Time</option>
      <option value=6>2x3 Math Time</option>
   </select>
   choice 3 </br>
</p>
<p>
   Class Choices 2 </br>
   <select name="1_option_2">
      <option value=1>2x3 Knitting</option>
      <option value=2>2x3 Computers</option>
      <option value=3>2x3 Having Fun</option>
   </select>
   choice 1 </br>
   <select name="2_option_2">
      <option value=1>2x3 Knitting</option>
      <option value=2>2x3 Computers</option>
      <option value=3>2x3 Having Fun</option>
   </select>
   choice 2 </br>
   <select name="3_option_2">
      <option value=1>2x3 Knitting</option>
      <option value=2>2x3 Computers</option>
      <option value=3>2x3 Having Fun</option>
   </select>
   choice 3 </br>
</p>

上面的代码遵循这些规则。

对于所有(第 n)类选择( block ？)

• 如果类别选择( block ？)有 2 个类别，则会生成两个选择选项。
• 如果一个类别选择( block ？)有 3 个类别，则会生成三个选择选项。
• ...
• 如果一个类别选择( block ？)有 n 个类别，则生成第 N 个选择选项。

注意，我生成了唯一的选择名称，目的是使查找唯一的集合变得更容易。如果不是这种情况，我可以更改给定的名称，使其具有更统一的名称。另外，我可以根据需要添加类名或其他属性。我对 html 和脚本很陌生，所以我做了很多猜测工作。

对脚本语言没有要求。

如何验证第 n 个选择子集中的唯一选择？ 也就是说，对于每个 Choice block ，强制执行选项的唯一值。

例如:

拒绝输入

Class Choices 1 != 4,4,4  
Class Choices 1 != 4,4,5  
Class Choices 1 != 4,4,6 
...
Class Choices 1 != 5,5,5  
Class Choices 1 != 5,4,4  
Class Choices 1 != 5,6,6  
...
Class Choices 1 != 6,6,6  
Class Choices 1 != 6,6,5  
Class Choices 1 != 6,4,4  
...

对于任何重复项

接受的输入

Class Choices 1 == 4,5,6  
Class Choices 1 == 5,6,4  
Class Choices 1 == 6,5,4  
...

验证的范围应与类别选择相关。 即Class Choice 1、Class Choice 2、...Class Choice N

Answer 1

这是解决此任务的要点。

$(function(){
  $('select').change(function(){
    var enabled = [];
    
    $('.group').each(function(){
      var values = [];
      $(this).children('select').each(function(){
        var value = $(this).find(":selected").val();
        // fills the enabled array with true or false depending if the value is unique to the group; 
        enabled.push(areWeSpecialYet(values, value));
        
        values.push(value);
      });
    });
    // enables the button if all are unique.
    enableTheButton(enabled);
  });
});

如果您有兴趣，可以在此处查看工作示例，它将适用于任意数量的组或选项:

JSBin example