Single Choice Dropdown

Question

I am building a form to rank series of items. The user will read the item and select in a dropdown the rating from 1 to 20. All 20 items will be displayed at the same time. What is the best way to make sure that the user didn't select the same number for more than one choice? Then I would display an error message, "You've already ranked an item as number 5"

Thanks

Answer 1

Put the items in a list with options to move an element up or down in the list.

Answer 2

There is a jquery plug-in for validation, that can help you define rules. It only works on submit, though but it'll still wont send the form and tell you which entry is wrong. Take a look at it, may be it can help you.

Answer 3

I would suggest something like the following function. You may want to add something to revert the selection to some default value if it is a duplicate.

function checkDupe(element) {
    var dupe = false;

    $("select").each(function() {
    if ($(this).attr("id") != $(element).attr("id") && $(this).attr("value") == $(element).attr("value")) {
            dupe = true;

            alert("You have already ranked an item number " + $(element).attr("value"));

            return;
        }
    });

    return dupe;
}

Just add that to the onchange event for all the dropdown lists like this.

<select id="a1" onchange="checkDupe(this)">

It's important to note that each list must have a unique ID.