需要通過多個選擇字段驗證唯一的特定值

Question

我有一組帶有下拉字段的表單，其中每個表單都具有默認值「0」和可用值1-3。這些作爲優先選擇，用戶選擇他們的前3項。每個選擇字段名稱都是唯一的，並填充到PHP foreach循環中 - 我只是在下面的示例中將其稱爲「N」。

<select class="variable_priority unique required" name="select-N"> 
    <option value="0"></option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 

「0」值用作非優先選擇的默認值/預設值。使用技術described here，我已成功修改JQuery驗證，以確保通過比較級「variable_priority」，在超過一個下拉列表，用戶可以不挑1，2或3：

$('.variable_priority').each(function() { 
      if ($(this).val() === value && $(this).val() > 0) { 
       timeRepeated++; 
      } 
     }); 

不過，我仍然需要驗證用戶確實在任何選擇字段中輸入了1,2和3的值，並且沒有跳過任何值。任何人都可以給我一些關於如何在JQuery驗證的上下文中做到這一點的指導？

Answer 1

重新制作JS小提琴的要求後。 http://jsfiddle.net/halfcube/aLvc6/

我想，這也許更接近你的要求

HTML

<div class="selects"> 
    <select class="variable_priority unique required" name="select[]" required> 
     <option value="0">Select</option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
    </select> 
    <select class="variable_priority unique required" name="select[]" required> 
     <option value="0">Select</option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
    </select> 
    <select class="variable_priority unique required" name="select[]" required> 
     <option value="0">Select</option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
    </select> 
    <select class="variable_priority unique required" name="select[]" required> 
     <option value="0">Select</option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
    </select> 
</div> 
<div class="value"> 
    0 
</div> 

CSS

.valid{ 
    box-shadow:0 0 10px green; 
    -webkit-box-shadow:0 0 10px green; 
    -moz-box-shadow:0 0 10px green; 
} 

的JavaScript

$(document).ready(function() { 

    function checkSelected(val) { 
     var ret = false; 
     $(".variable_priority").each(function() { 
      if ($(this).val() === val) { 
       ret = true; 
      } 
     }); 
     return ret; 
    } 

    function totalValue() { 
     var total = 0; 
     $(".variable_priority:first option[value!=0]").each(function() { 
      total = total + parseInt($(this).val(), 10); 
     }); 
     return total; 
    } 
    function totalSelectedValue(){ 
     var total = 0; 
     $(".variable_priority option:selected").each(function() { 
      total = total + parseInt($(this).val(), 10); 
     }); 
     return total; 
    } 
    $('.value').html(totalValue()); 
    $('.variable_priority').change(function() { 
    //  variable_priority = variable_priority + parseInt($(this).val(), 10); 
     $('.value').html(totalSelectedValue() + " out of " + totalValue()); 

     $('option', this).each(function() { 
      if (checkSelected($(this).val()) && $(this).val() !== "0") { 
       $('.variable_priority option[value=' + $(this).val() + ']').attr('disabled', true); 
      } else { 
       $('.variable_priority option[value=' + $(this).val() + ']').removeAttr('disabled'); 
      } 
     }); 
     if (totalSelectedValue() === totalValue()) { 
      $('.selects').removeClass('invalid').addClass('valid'); 
     } else { 
      $('.selects').removeClass('valid').addClass('invalid'); 
     } 
    }); 
}); 

現在我得回去工作。

享受

Answer 2

我首先會讓瀏覽器做大部分的工作，所以我會使用HTML5屬性，如requireddisabled和selected以獲得良好的效果。

你可以嘗試這樣的事情。

<select class="variable_priority unique required" name="select-N" required> 
    <option value="0" disabled></option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 

這應該足以讓瀏覽器顯示blank爲默認值，那麼當用戶選擇他們不能再次選擇blank一個選項。

爲了安全起見，我會將綁定到表單提交事件的JavaScript端驗證以確保表單有效。

類似這樣;

$("form").bind("submit",function(){ 
    if($("select.variable_priority :selected").length >= $("select.variable_priority").length){ 
    return true; 
    }else{ 
    return false; 
    } 
}); 

這個if語句將檢查相比，頁面上的下拉列表總數的selected下拉列表中選擇計數。如果它們匹配，那麼表單是有效的。

我希望這可以幫助你。

Answer 3

試試這個：

<script>$(document).ready(function() { 
$('select').change(function() { 
    $('option[value=' + $(this).val() + ']').attr('disabled', 'disabled'); 
}); 

}）;