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>

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

EX：

值1 - ＆gt;乙
值2 - ＆gt; ç
值3 - ＆gt; A

但不允许

值1 - ＆gt;乙
值2 - ＆gt;乙
值3 - ＆gt; A

我无法使用此功能：answer 因为我有8个<select>和8个<option>，用户可以更改他/她的选项。

不幸的是，我无法使用单个选择集来＆＃34;多个＆＃34;。我刚刚找到了这个答案，但由于我没有jquery或Javascript，我不能在没有表格中的select标签的情况下使其工作： Here is the answer

更新我发现了一种更好的方法，但我遇到了一些问题。我尝试修改此代码：with input tags以使其与select标记一起使用。我现在面临的问题是，每次选择相同的选项两次，错误＆＃34; 请输入唯一值＆＃34;显示（我确实希望看到它，当用户选择相同的值两次或更多时），当您更改值时，＆＃34; 请输入唯一值＆＃34;确实消失了。但是，它保持＆＃34; 此字段是必需的＆＃34;后面的警告（当点击一个新的选择标签时）。所以，＆＃34; 此字段是必需的＆＃34;在用户为所有选择标记选择一个选项之前，它不会消失。这是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 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)，而不是恼人的警报 - ＆gt;因为，有警报 - 如果用户试图改变主意 - 用户体验不是那么好，再次......

DEMO：http://jsfiddle.net/dq9j4s32/2

Answer 3

您的代码......

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

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

jQuery Validate插件要求每个表单数据输入元素都包含唯一的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以“{1}}开头”的所有元素。然后rank将规则应用于选择器匹配的每个实例。

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

3 个答案: