Question

I’m trying to develop a football teamline function that will store up to 18 players (11 starting players and 7 subs) using a select box for each player.

When a player is selected from one select box they should then be hidden in all the other select boxes to stop the user from being able to select the same player again.

I’ve written a javascript/jquery function that does this but it is VERY long winded and I’m guessing that the best option to make it a lot more manageable would be to write a while loop but I’m getting myself confused trying to code it.

The current code (for the starting XI) can be seen at http://jsfiddle.net/aFDjS/

Am I right in thinking that what I need to do is probably have a while loop nested inside another while loop to ignore when the count is the same as the player number kind of like this…

i = 1;
playerNo = 1;
while (i < 19) {        
    while (playerNo < 19 && i != playerNo) {
        playerID = $("#player" + i + "Name option:selected").val();
        $("select#player" + playerNo + "Name >option" ).filter( "[class='"+ playerID +"']" ).hide();
        $("select#player" + playerNo + "Name >option" ).filter( "[class!='"+ playerID +"']" ).show();
        playerNo++;
    }
    i++;
}

Is this along the right lines?

Answer 1

No, you should be using for loops.

The standard is to use for loops when counting something and while loops when you’re waiting for an event or value to change.

The logic in those for loops is hard to follow and looks wrong anyway.

But regardless of this, the easiest way to do this is using the power of jquery:

$(function() {
    $("select").on("change", function() {
        //reset to showing all the options
        $("select option").show(); 

        //for each selected option
        $("select option:selected").each(function() {
            var optionSelected = this;
            var playerID = $(this).attr("class");
            //hide the option in all the other dropdowns
            $("option." + playerID).each(function() {
                if(this != optionSelected) {
                    $(this).hide();
                }
            });
        });
    });
});

Working example here:

http://jsfiddle.net/4avwm/1/