在提交之前验证“选择”下拉列表

Question

在我的页面上，可以有多个选择下拉列表，在我提交页面之前需要以某种方式进行验证。

例如，在某个实例中，可以有七个选择下拉列表，如下所示。

我想要的是： -

  

如果有5个或更多＆＃34;选择＆＃34;，则确切地应该选择1个   一个应该有2个，一个应该有3个等等到5个。   剩下的所有都应该自动选择0。

和

  

如果小于5，则应该选择1个，恰好一个   应该选择2个，直到4个。这取决于如何   许多＆＃34;选择＆＃34;出现在页面上

我在JS下面做了什么。它基本上没什么帮助： - （

HTML

<select name="first_select_0" class="select_style">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>
<select name="first_select_1" class="select_style">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>
<select name="first_select_2" class="select_style">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>
<select name="first_select_3" class="select_style">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>
<select name="first_select_4" class="select_style">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>
<select name="first_select_5" class="select_style">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>
<select name="first_select_6" class="select_style">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

JS

$("#submit-selection").click(function(e){
        var count_selects = $(".select_style").length;
        if (count_selects >=5 ) {
            alert(count_selects + "is >=5");
        }
        else {
            alert(count_selects + "is <5");
        }
        e.preventDefault();
    });

我的JsFiddle是

JSFiddle Link

Answer 1

这样的事情怎么样？

$(function() {

    $("#submit-selection").click(function(e) {

        var selects = $(".select_style");

        var option_occurrences = {0:0, 1:0, 2:0, 3:0, 4:0, 5:0};

        for (var i = 0; i < selects.length; i ++) {
            option_occurrences[selects[i].value] ++;
        }

        var ok = true;

        for (var i = 1; i <= Math.min(5, selects.length); i ++) {
            if (option_occurrences[i] != 1) {
                ok = false;
                break;
            }
        }

        alert(ok ? "OK!" : "not OK...");

        e.preventDefault();
    });

});

Online Demo

Answer 2

如果我明白你想要什么，这应该有效：

function validate(){
    passed = true;
    if ($('select').length > 6) {
        for (var i = 0; i <= 5; i++) {
            if (i > 0) {
                if ($('select option:selected[value=' + i + ']').length != 1) {
                    passed = false;
                }
            } else {
                if ($('select option:selected[value=' + i + ']').length != 2) {
                    passed = false;
                }
            }
        }
        if (passed) {
            alert('passed');
        } else {
            alert('not passed');
        }
    } else {
        for (var i = 0; i < $('select').length; i++) {

            if ($('select option:selected[value=' + i + ']').length != 1) {
                passed = false;
            }

        }
        if (passed) {
            alert('passed');
        } else {
            alert('not passed');
        }
    }
}

demo

Answer 3

尝试这样的事情。我希望它能解决你的问题... :)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#submit-selection").click(function(e){
        var count_selects = $(".select_style").length;
        var select = $('#form1').find('select');
        var track = [];
        var limit = 0;
        if (count_selects >=5 ) {
            $.each(select, function(i, v) {
                var val = $(this).val();
                if(val != '0')
                    track.push(val);
            });
            limit = count_selects - 1;
        }
        else {
            $.each(select, function(i, v) {
                var val = $(this).val();
                if(val != '0')
                    track.push(val);
            });
            limit = count_selects + 1;
        }
        if(checkArray(track , limit) == 1){
            //alert('here');
            e.preventDefault();
        }
    });
});
function checkArray(track, limit){
    var flag = 0;
    for(var i = 1; i < limit; i++)
    {
        if($.inArray(i.toString(), track) == -1){
            alert('Can\'t submit');
            flag = 1;
            break;
        }
    }
    return flag;
}
</script>