Необходимо проверить уникальное, конкретное значение в нескольких полях выбора.

Question

У меня есть форма с набором выпадающих полей, каждое из которых имеет значение по умолчанию «0» и доступные значения 1-3. Они служат в качестве приоритетного выбора, где пользователь выбирает свои первые 3 элемента. Каждое имя поля выбора является уникальным и заполняется в цикле foreach PHP - я просто называю его «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, чтобы гарантировать, что пользователь не может выбрать 1, 2 или 3 в более чем одном раскрывающемся списке, сравнивая класс "variable_priority":

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

Попробуйте это:

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

});

Answer 3

Во-первых, я бы заставил браузер выполнять большую часть работы, поэтому я бы использовал атрибуты 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 проверит количество выпадающих списков selected по сравнению с общим количеством выпадающих страниц. Если они совпадают, то форма действительна.

Надеюсь, это поможет вам.