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

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

本文关键字：确保 选择 选项 是不同 表单 提交 何确保      更新时间：2023-09-26
        <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>

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

,

  • value 1 -> B
  • value 2 -> C
  • value 3 -> A

But not allow

  • value 1 -> B

  • value 2 -> B

  • value 3 -> A

我不能用这个:答案因为我有8个<select>和8个<option>，并且允许用户更改他/她的选项。

不幸的是，我不能使用单个选择设置为"multiple"。我找到了这个答案刚才，但因为我不jquery或Javascript很好，我不能使它的工作没有选择标签内表:这就是答案

更新:我找到了一个更好的方法，但是我遇到了一些问题。我试图修改这段代码:输入标签，使其与选择标签一起工作。我现在面临的问题是，每次你选择相同的选项两次，错误"请输入一个唯一值"显示(我想看到它，当用户选择相同的值两次或更多)，当你改变的值"请输入一个唯一值"确实消失了。但是，它保持一个"这个字段是必需的"警告后面(当点击一个新的选择标签)。因此，"这个字段是必需的"直到用户为所有选择标记选择一个选项才会消失。下面是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']
      },
  },
});

我想知道你是否可以简单地使用单个选择集为"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>

似乎是合适的:-)

你的代码…

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以rank开头的元素。然后.each()将该规则应用于与选择器匹配的每个实例。

您可以尝试这样做:

$(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

相关文章：