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

问题

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?

回答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/

回答2:

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.

回答3:

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();
   }
});

来源：https://stackoverflow.com/questions/14830988/javascript-while-loop-get-select-option-and-hide-option-from-other-select-boxes

标签

javascript

jquery

while-loop