需要验证多个选择字段的唯一、特定值

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”值用作非优先选择的默认/预设值。使用此处描述的技术，我成功修改了 JQuery Validate 以确保用户无法通过比较“variable_priority”类在多个下拉列表中选择 1、2 或 3：

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

但是，我仍然需要验证用户确实输入了值 1、2 和3 在任何选择字段中，并且没有跳过任何字段。谁能给我一些关于如何在 JQuery Validate 上下文中执行此操作的指导？

Answer 1

重新处理 JS Fiddle 的要求后。 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 属性，例如 required disabled 和 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 语句将检查所选下拉列表的计数与页面上下拉列表的总数。如果它们匹配，则该表格有效。

我希望这对你有帮助。

Answer 3

试试这个：

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

});