如何在提交表單之前確保所選選項不同？

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 - >乙
• 值2 - 「ç
• 值3 - > A

但不允許

因爲我有8 answer ：

• 值1 - >乙

• 值2 - - >乙

• 值3>

我不能使用此<select>與8 <option>，並允許用戶更改他/她的選項。

不幸的是，我不能使用單個選擇設置爲「多個」。 我發現這個答案就在剛纔，但因爲我不jQuery的或Javascript好，我不能讓它沒有選擇標籤的工作表中： Here is the answer

UPDATE： 我發現了一個更好的辦法去做，但我有一些問題。 我試圖修改此代碼：with input tags以使其與選定標籤一起使用。我現在面臨的問題是，每次您選擇相同的選項兩次，錯誤「請輸入一個唯一值」顯示（我想看到它，當用戶選擇相同的值兩次或更多）當您更改值「請輸入唯一值」確實會消失。但是，它保留了「此字段需要」後面的警告（當點擊一個新的選擇標籤時）。因此，「該字段是必需的」「不會消失，直到用戶爲所有選擇標籤選擇一個選項。 這裏是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

你的代碼...

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()將規則應用於由選擇器匹配的每個實例。

Answer 2

不知你可以簡單地使用一個單一的選擇設置爲「多」 ......

<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 3

你可以嘗試這樣的事情：

$(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)，而不是惱人的警報 - >因爲警報 - 如果用戶試圖改變他心靈 - 用戶體驗不是很好，再次...

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