强制多个选择（下拉列表）具有唯一值

Question

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

这些选择的方式如下： -

HTML

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

规则： -

我想要的如下： -

• 所有选择将默认为空值（-1）
• 将为所有选择唯一选择值1,2和3。这意味着只有一个选项的值为＆＃34; 1＆＃34;，只有一个选择的值为＆＃34; 2＆＃34;并且只有一个选择值为＆＃34; 3＆＃34;。
  • 所有剩余部分的值应为＆＃34; 0＆＃34;。

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

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

如果我清楚地了解您的问题，这里有解决方案： 将属性selected =“selected”添加到每个标签“option”，其值为“ - 1”。 这是JS：

$(document).ready(function(){ 
    $("#submit-selection").click(function(e){
       var uniqueVals = [1,2,3];
       var selectedVals = [];
       var inputs = $(".select_style");
        inputs.each(function(){
            if(this.value == -1){
                this.value = 0;
            }
            var intVal = parseInt(this.value)
            if(uniqueVals.indexOf(intVal) != -1){
                if(selectedVals.indexOf(intVal) != -1){
                    alert('validation is not passed');
                    return 0;
                }else{
                    selectedVals.push(intVal);
                }
            }
        });
       e.preventDefault();
    });
});

小提琴：http://jsfiddle.net/weeklyTea/L9JEK/

Answer 2

这有点脏，但我想你想要的是：

HTML：

<form method="post" class="my-form" id="form-1" action="">

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

<input type="submit" name="submit" id="submit-selection" value="Submit" class="submit-button btn btn-lg btn-primary" />

</form>

JS：

$(document).ready(function(){ 
    $("#submit-selection").click(function(e){
        var count_selects = $(".select_style").length;
       var correct = true;
        if($(".select_style option[value='1']:selected").length != 1){ correct = false; }
        if($(".select_style option[value='2']:selected").length != 1){ correct = false; }
        if($(".select_style option[value='3']:selected").length != 1){ correct = false; }
        if($(".select_style option[value='0']:selected").length != count_selects-3){ correct = false; }
        alert(correct);
        e.preventDefault();
    });
});

FIDDLE： http://jsfiddle.net/frikinside/8wcp6/4/