user136952 user136952 - 27 days ago 11
HTML Question

How would I validate unique selects, within nth sub sets of selects?

I have this code that is generated dynamically.

<p>
Class Choices 1 </br>
<select name="1_option_1">
<option value=4>2x3 Study Time</option>
<option value=5>2x3 Science Time</option>
<option value=6>2x3 Math Time</option>
</select>
choice 1 </br>
<select name="2_option_1">
<option value=4>2x3 Study Time</option>
<option value=5>2x3 Science Time</option>
<option value=6>2x3 Math Time</option>
</select>
choice 2 </br>
<select name="3_option_1">
<option value=4>2x3 Study Time</option>
<option value=5>2x3 Science Time</option>
<option value=6>2x3 Math Time</option>
</select>
choice 3 </br>
</p>
<p>
Class Choices 2 </br>
<select name="1_option_2">
<option value=1>2x3 Knitting</option>
<option value=2>2x3 Computers</option>
<option value=3>2x3 Having Fun</option>
</select>
choice 1 </br>
<select name="2_option_2">
<option value=1>2x3 Knitting</option>
<option value=2>2x3 Computers</option>
<option value=3>2x3 Having Fun</option>
</select>
choice 2 </br>
<select name="3_option_2">
<option value=1>2x3 Knitting</option>
<option value=2>2x3 Computers</option>
<option value=3>2x3 Having Fun</option>
</select>
choice 3 </br>
</p>


The above code follows these rules.

For all (nth) Class Choices (block?)


  • If a Class Choice (block?) has 2 classes, then two choice option selects are generated.

  • If a Class Choice (block?) has 3 classes, then three choice option selects are generated.

  • ...

  • If a Class Choice (block?) has n classes, then Nth choice option selects are generated.



Note I generated unique select names with the intention that this could make finding unique sets easier. If that is not the case I can change the given to have more uniformed names. Also, I can add class names or other properties as needed. I am new to html and scripting so I am doing lots of guess work.

No requirements for scripting languages.

How would I validate unique selects, within nth sub sets of selects?
That is, for each Choice block, enforce unique values for options.

For example:

Rejected inputs

Class Choices 1 != 4,4,4
Class Choices 1 != 4,4,5
Class Choices 1 != 4,4,6
...
Class Choices 1 != 5,5,5
Class Choices 1 != 5,4,4
Class Choices 1 != 5,6,6
...
Class Choices 1 != 6,6,6
Class Choices 1 != 6,6,5
Class Choices 1 != 6,4,4
...


For any duplicates

Accepted inputs

Class Choices 1 == 4,5,6
Class Choices 1 == 5,6,4
Class Choices 1 == 6,5,4
...


The scope of the validation should relate to Class Choice(s).
That is Class Choice 1, Class Choice 2, ... Class Choice N

Answer

Here's the gist for solving this task.

$(function(){
  $('select').change(function(){
    var enabled = [];

    $('.group').each(function(){
      var values = [];
      $(this).children('select').each(function(){
        var value = $(this).find(":selected").val();
        // fills the enabled array with true or false depending if the value is unique to the group; 
        enabled.push(areWeSpecialYet(values, value));

        values.push(value);
      });
    });
    // enables the button if all are unique.
    enableTheButton(enabled);
  });
});

If you're interested you can check the working example here, it will work with any number of groups or options:

JSBin example