Question

First, i have an array that has all the option value must be selected e.g.

$require=array('volvo','saab');

Then ,

i have x number of select box, x is a number less or equal to
number of option value

Then i have the selectbox e.g.

<select name ="car" id="0">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<select name ="car" id="1">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<select name ="car" id="2">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

In this case , i need to check:

1) No duplicate select value

2)The value in array must be selected one and only one.

I can figure out the checking of unqiue value in select box , but how about the second condition ?

Thank you

Using the above case as an example

id = 0 , value = volvo
id = 1 , value = Mercedes
id = 2 , value = Audi

Not valid

id = 0 , value = saab
id = 1 , value = Audi
id = 2 , value = volvo

valid

Answer 1

1st suggestion, please don’t use same name for more than one HTML element, its invalid html.
If you just doing it for the selector purpose, use class attribute instead instead.

I went ahead with “divide and rule” approach, its not very well optimized, but it works.

Well I tried to divide your solution in 2 steps:

Step 1: Check for uniqueness

//val is the array of values from each select box
function checkUnique(val){
    var cnt = val.length;
    for(i = 0; i < cnt; i++){
        for(j = i+1; j < cnt; j++){
            if(val[i] == val[j]){
                return false;
            }
        }
    }
    return true;
}

Step 2: Check for the required values for validation

// array of required values:
var required = ['saab', 'volvo'];
function validate(){
    var val = [];
    $("select[name=car]").each(function(){
        val.push(this.value);
    });
    if(checkUnique(val)){
        var cnt = required.length;
        var cnt2 = val.length;
        for(k = 0; k < cnt; k++){
            var flag = false;
            for(l = 0; l < cnt2; l++){
                if(required[k] == val[l]){
                    flag = true;
                }
            }
            if(flag){
                return true;
            }
        }
    }else{
        return false;
    }
}

I call validate function on document load and all events of selectbox change event:

function showMsg(){
    var msg = (validate())?'OK':'NOT OK';
    // added html DIV tag with id="result" to show the status on change events
    $("#result").html(msg);
}
$(document).ready(function(){
    showMsg();
});
$("select[name=car]").change(function () {
        showMsg();
});

You can check the complete example here on jsfiddle:
http://jsfiddle.net/LCxJw/