Question

我正在为足球运动员建立一个网站。我有一个系统，网站的管理员需要在数据库中输入11个玩家，以供后一个列表使用。

现在为此，我制作了一个带有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

好吧，你无法可靠地隐藏选择选项跨浏览器，所以我建议禁用这些元素。

这是一个有效的演示：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); 
    });
});

Answer 3

您可能也只是想重新考虑您的UI ...对于这种类型的选择系统而言，使用DDL似乎很愚蠢。为什么不只是拥有一个所有玩家的列表框，其中包括＆＃34; select＆＃34;或＆＃34; - ＆gt;＆＃34;按钮移动＆＃34;移动＆＃34;他们到选定的名单。 IMO，这比每次更改时动态重新填充11个DDL更清晰。

动态隐藏选择框中的选项

3 个答案: