Скрыть опции в окне выбора динамически

Question

Я создаю веб-сайт для футболистов. У меня есть система, в которой администратор сайта должен ввести 11 игроков в db для последнего листинга.

Теперь для этого я сделал систему с 11 ячейками выбора с игроками в качестве опций в каждом окне выбора. То, что я хочу, - это когда администратор выбирает John Doe из первого блока выбора, который больше не доступен в других 10 блоках выбора, и когда администратор выбирает параметр по умолчанию в первом поле выбора (значение 0), John Doe возвращается ко всем ячейкам выбора. Вот структура:

<select class="first_team" name="player_1"> 
    <option value="0">Choose</option> 
    <option value="1">test1</option> 
    <option value="2">test2 test</option> 
    <option value="3">test3</option> 
    <option value="4">test4</option> 
. 
. 
. 
</select> 

<select class="first_team" name="player_2"> 
    <option value="0">Choose</option> 
    <option value="1">test1</option> 
    <option value="2">test2 test</option> 
    <option value="3">test3</option> 
    <option value="4">test4</option> 
. 
. 
. 
</select> 

Я пытался что-то подобное, но не работает должным образом (игрок был скрыт постоянно):

$(".first_team").click(function(){ 
     var value = $(this).val(); 
     $(".first_team option[value=" + value + "]").hide(); 
    }); 

Answer 1

игрок был скрыт постоянно

Это потому, что вы только скрываете игрока. Нигде вы не показываете игрока снова.

Одна вещь, которую вы можете попробовать, состоит в том, чтобы получить все выбранные игроки всякий раз, когда какой-либо выбор изменится, показать всех игроков (по умолчанию) и скрыть всех выбранных игроков. Что-то вроде этого:

// Whenever any selection in any select element changes 
$(".first_team").change(function() { 

    // First show all players 
    $(".first_team option").show(); 

    // Then for each select element, hide the selected player from other elements 
    $(".first_team").each(function() { 
     var selectedPlayer = $(this).val(); 

     // Hide it from every list 
     $(".first_team option[value=" + selectedPlayer + "]").hide(); 

     // But don't hide it from *this* list 
     $(this).find("option[value=" + selectedPlayer + "]").show(); 
    }); 
}); 

Там в вероятно (читай: определенно) более эффективный способ сделать это, что не предполагает все это показать/скрыть/показ одних и тех же элементов, каждый раз, но мы я не говорю о множестве элементов здесь.

Answer 2

Вы также можете просто переосмыслить свой интерфейс ... кажется глупым иметь DDL для этого типа системы выбора. Почему бы просто не иметь список всех игроков, с чем-то вроде кнопки «выбрать» или «->», чтобы «переместить» их в выбранный список. ИМО, это было бы чище, чем динамическое повторение 11 DDL при каждом изменении.

Answer 3

Ну, вы не можете надежно скрыть выбранный вариант кросс-браузера, поэтому я бы предложил отключить элементы.

Вот рабочий пример: http://jsfiddle.net/76fUD/

$('.first_team').on('change', function(e) { 
    var $this = $(this), 
     # get all the currently selected values 
     values = $('.first_team').map(function() { return $(this).val() }); 
    # reenable all options 
    $('.first_team option').removeAttr('disabled'); 
    values.each(function(i, item) { 
     # disable each option in current values, unless they are currently selected 
     $('.first_team option[value=' + item + ']').not(':selected').attr('disabled', true); 
    }); 
});