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

Question

Я пытаюсь разработать функцию футбольной команды, которая будет хранить до 18 игроков (11 стартовых игроков и 7 подписчиков), используя поле выбора для каждого игрока.

Когда игрок выбран из одного окна выбора, он должен быть скрыт во всех остальных блоках выбора, чтобы пользователь не мог снова выбрать того же игрока.

Я написал функцию javascript/jquery, которая делает это, но она ОЧЕНЬ длинная, и я предполагаю, что лучший вариант сделать ее намного более управляемой - это написать цикл while, но я получаю я смутился, пытаясь закодировать его.

текущий код (для исходного XI) можно увидеть на http://jsfiddle.net/aFDjS/

Правильно ли я думать, что то, что мне нужно сделать, это, вероятно, время цикла вложен внутрь другого цикла в то время игнорировать, когда отсчет то же, что и номер игрока такого типа ...

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++; 
} 

Это по правому краю?

Answer 1

Нет, вы должны использовать for петли.

Стандарт должен использовать петли for при подсчете чего-либо и while Петли, когда вы ждете события или значения, которые необходимо изменить.

Логика в цикле для петель очень сложна и в любом случае выглядит неправильной.

Но независимо от этого, самый простой способ сделать это, используя силу 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(); 
       } 
      }); 
     }); 
    }); 
}); 

Рабочий пример здесь:

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

Answer 2

Ну, не знаю, что такое полная концепция программы, но я думаю, что ваше решение немного переборщило.
Я бы дал каждому флажку имя (например: "plr"+ID), и я бы добавил к нему событие onclick. Когда событие тригерируется, флажок будет искать все флажки с тем же именем и отключить их.

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 
     } 
    } 
} 

Конечно, имя класса может быть использован вместо:

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

Вот active code.

Answer 3

Может быть, это даст вам идею для реализации: 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(); 
    } 
});