JavaScript while loop get select option and hide option from other select boxes

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?

Why wouldn't you store the player ID in the checkbox name? It is easyer to access and you can get all checkboxes of the same name using `document.getElementsByName()`. — Tomáš Zato, Feb 12 '13 at 11:04

score 0 · Answer 1 · answered Feb 12 '13 at 11:25

Well, don't know what is complete concept of the program, but I think your solution is a bit of overkill.
I would give each checkbox a name (eg.: "plr"+ID) and I would append an onclick event to it. When event is trigered, the checkbox would search for all checkboxes of the same name and disable them.

 function selectPlr(event) {
     var other = document.getElementsByName(this.name);  //Get element collection
     for(var i=0; i<other.length; i++) {
       if(other[i]!=this) {  //Ignore itself
         other[i].disabled = this.checked;   //Disable if the player is picked, enable if unpicked
       }
     }
 }

Of course, class name can be used instead:

 var other = $("input."+this.className);

Here is the active code.

mattmanser · Accepted Answer · 2017-01-25T10:16:13.787

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/

Matt this is great! The next step is to then have a hidden select box next to each substitute that will populate each time a player is selected in the line-up. Once a player is selected as a substitute the drop-down will then be displayed next to them so that they can select the player that they replaced. So in essence this is probably the opposition of what you helped me with here so is the easiest way to use the select name/id to specify the ones to amend (e.g. at the moment I loop round a count and set the name/id as subbedPlayer#i# - where i is the count number (12-18))? — CPB07, Feb 12 '13 at 15:43

score 0 · Answer 3 · answered Feb 12 '13 at 11:46

May be this would give you the idea to implement: http://jsfiddle.net/2jGDU/

$('#players').change(function () {
   $('#pl_11').prepend($('option:selected', this).clone());
   $('option:selected', this).remove();
   if ($('option', this).length <= 8) {
    $('option:first', this).remove();
    $('#sub').prepend($(this).html());
    $('option', this).remove();
   }
});

JavaScript while loop get select option and hide option from other select boxes

3 Answers3

Linked