CODEWITHSUNDEEP
javascriptjqueryhtml
Steve
Steve

Reputation: 2588

Forcing multiple selects (dropdowns) to have unique values

On my page, there are select dropdown which need to be validated in certain way before I submit the page.

Here is how those selects looks like:-

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>

Rules:-

What I want is as follows:-

What I did is below in JS. It's basically not much helpful :-(

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();
    });

My JsFiddle is

JSFiddle Link

Upvotes: 0

Views: 2285

Answers (2)

weeklyTea
weeklyTea

Reputation: 345

If i clearly understood your problem, here is solution: Add attribute selected="selected" to each tag "option" with value="-1". Here is 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();
    });
});

Fiddle: http://jsfiddle.net/weeklyTea/L9JEK/

Upvotes: 2

frikinside
frikinside

Reputation: 1244

This is a bit dirty, but i think is what you want:

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/

Upvotes: 0

Related Questions