在提交表单之前如何确保所选选项不同？

Question

        <select class="distinctrank" name="rank[]"  required>
            <option value="">Select</option>
            <option value="1">A</option>
            <option value="2">B</option>
            <option value="3">C</option>
        </select>

        <select class="distinctrank" name="rank[]"  required>
            <option value="">Select</option>
            <option value="1">A</option>
            <option value="2">B</option>
            <option value="3">C</option>
        </select>

        <select class="distinctrank" name="rank[]"  required>
            <option value="">Select</option>
            <option value="1">A</option>
            <option value="2">B</option>
            <option value="3">C</option>
        </select>

我试图阻止用户 select 两次相同的选项

例如：

值 1 -> B
值 2 -> C
值 3 -> A

但不允许

值 1 -> B
值 2 -> B
值 3 -> A

我不能用这个：answer 因为我有 8 <select> 和 8 <option> 并且允许用户更改 his/her 选项。

不幸的是，我无法使用单个 select 设置为 "multiple"。我刚刚找到了这个答案，但由于我不 jquery 或 Javascript 很好，如果没有 table 中的 select 标签，我无法使其工作：

更新： 我找到了更好的方法，但我遇到了一些问题。我试图修改此代码：with input tags 以使其与 select 标签一起使用。我现在面临的问题是，每次 select 相同的选项两次，都会出现错误“请输入唯一值”（我确实想看看，当用户 select 两次或更多次相同的值时）以及当您更改值时，“请输入唯一值”确实会消失。但是，它保留了一个“这个字段是必需的”警告（当点击一个新的select标签时）。因此，在用户为所有 select 标记选择一个选项之前，“此字段是必需的”不会消失。这是 Jquery 代码：

 jQuery.e

 jQuery.validator.addMethod("notEqualToGroup", function(value, element, options) {
  // get all the elements passed here with the same class
  var elems = $(element).parents('form').find(options[0]);
  // the value of the current element
  var valueToCompare = value;
  // count
  var matchesFound = 0;
  // loop each element and compare its value with the current value
  // and increase the count every time we find one
  jQuery.each(elems, function() {
      thisVal = $(this).val();
      if (thisVal === valueToCompare) {
          matchesFound++;
      }
     });
    // count should be either 0 or 1 max
    if (this.optional(element) || matchesFound <= 1) {
      //elems.removeClass('error');
      return true;
    } else {
      //elems.addClass('error');
    }
  }, jQuery.validator.format("Please enter a Unique Value."))

   // validate form    
  $("#signupform").validate({


  rules: {
      'rank[]': {
          required: true,
          notEqualToGroup: ['.distinctrank']
      },
  },
});

Answer 1

我想知道您是否可以简单地使用一个 select 设置为 "multiple"...

<select multiple class="form-control" name="rank[]">
    <option value="">Select</option>
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
</select>

看起来很合适:-)

Answer 2

您可以尝试这样的操作：

$(document).ready(function() {

  $('select').change(function() {
    self = $(this);
    choosen = $(this).val();

    $('select').not(self).each(function() {

      if ($(this).val() == choosen) {

        // $(this).prop('disabled', true);
        alert('Option is already selected');
        $(self).val($(this).find("option:first").val());
      }

    });

  });
});

这实际上是您在另一个答案中找到的代码的部分实现。注释行会禁用已经选择的选项，但是......然后用户不能改变他们的想法......但是我可能会使用那个注释行(edit:probably not, it causes other problems)，而不是烦人的警报 - >因为，有警报 - 如果用户试图改变他的想法 - 用户体验又不是那么好......

演示：http://jsfiddle.net/dq9j4s32/2

Answer 3

您的代码...

rules: {
  'rank[]': { // <-- will only match one of your three
      required: true, ....

您不能让三个不同的 select 元素都共享相同的 name，在您的情况下，rank[]。

jQuery 验证插件要求每个表单数据输入元素包含唯一的 name。这是插件跟踪表单输入的方式，对此没有解决方法。您必须包含索引或更改 name.

rules: {
    'rank[1]': { 
        // rules
    },
    'rank[2]': { 
        // rules
    },
    'rank[3]': { 
        // rules
    }
}

如果所有三个都使用相同的规则，那么您可以使用 .rules() 方法一次应用它们...

$("#signupform").validate({ // plugin initialization
    // other rules & options
});

$('[name^="rank"]').each(function() {
    $(this).rules('add', {
        required: true,
        notEqualToGroup: ['.distinctrank']
    });
});

$('[name^="rank"]') 匹配具有 name 且 "starts with" rank 的所有元素。然后 .each() 将规则应用于选择器匹配的每个实例。

在提交表单之前如何确保所选选项不同？

how to make sure that selected options are different before submit the form?

javascript

jquery

jquery-validate