Question

我有一个带有游戏列表的选择框，另一个带有一个控制台列表。每个游戏都有可能属于许多游戏机。我希望根据第一个选择的游戏过滤第二个选择框。

因此，例如，如果我选择属于多个控制台的Forza Horizon等游戏，那么控制台选择框将仅过滤那些并隐藏其他控制台。

现在我已经设置了在select事件中捕获游戏文本值的位置。从那里我想过滤他们各自的optgroup标签属性，它是它所属的控制台。我似乎无法弄清楚如何检索除选定选项以外的其他可能的控制台。

<select class="game-select">
  <option value="">Select a game</option>
  <optgroup label="PS4"></optgroup>
    <option value="1">Forza Horizon 2</option>
    <option value="2">The Last of Us</option>
    <option value="3">Bioshock Infinite</option>
  </optgroup>
  <optgroup label="Xbox One">
    <option value="1">Forza Horizon</option>
    <option value="2">Halo</option>
    <option value="3">Bioshock Infinite</option>
  </optgroup>
</select>

<select class="console-select">
  <option value="">Select a console</option>
  <option value="1">PS4</option>
  <option value="2">Xbox One</option>
</select>

JS

$(function() {
  var gameConsoles = $(".console-select").html();

  $(".game-select").on("change", function() {
    var game    = $(this).find("option:selected").text(),
        options = gameConsoles.filter().html(); // Not sure how to filter
    if (options) {
      $(".console-select").html(options);
    } else {
      $(".console-select").empty();
    }
  });
});

Answer 1

更新2

你可以做这样的事情

data-*

这是一个演示 http://jsfiddle.net/dhirajbodicherla/m178xpc3/11/

更新

我使用data-game属性为每个游戏添加了代码。例如，以下两个游戏具有相同的<option value="1" data-game="FH">Forza Horizon 2</option> <option value="2" data-game="FH">Forza Horizon</option>属性，可用于确定这两个属性属于同一类别。

<select class="game-select">
    <option value="">Select a game</option>
    <optgroup label="PS4">
        <option value="1" data-game="FH">Forza Horizon 2</option>
        <option value="2" data-game="LU">The Last of Us</option>
        <option value="3" data-game="BI">Bioshock Infinite</option>
    </optgroup>
    <optgroup label="Xbox One">
        <option value="1" data-game="FH">Forza Horizon</option>
        <option value="2" data-game="HA">Halo</option>
        <option value="3" data-game="BI">Bioshock Infinite</option>
    </optgroup>
</select>
<select class="console-select">
    <option value="">Select a console</option>
    <option value="1">PS4</option>
    <option value="2">Xbox One</option>
</select>

完整示例

$(function () {
    var gameConsoleOptions = $('.console-select option');

    $(".game-select").on("change", function () {
        var selectedGame = $(this).find("option:selected").data('game'), games = [];
        console.log(selectedGame);
        if (selectedGame) {
            games = $.makeArray($(this).find('option[data-game="' + selectedGame + '"]').map(function () {
                return $(this).closest('optgroup').attr('label');
            }));
        }
        console.log(games);
        if (games) {
            gameConsoleOptions.hide();
            gameConsoleOptions.filter(function (i, v) {
                return games.indexOf($(v).text()) != -1;
            }).show();
        } else {
            gameConsoleOptions.show();
        }
    });
});

这是脚本

$(function () {
    var gameConsoleOptions = $('.console-select option');

    $(".game-select").on("change", function () {
        var label = $(this).find("option:selected").closest('optgroup').prop('label');
        if (label) {
            gameConsoleOptions.hide();
            gameConsoleOptions.filter(function (i, v) {
                return $(v).text() === label;
            }).show();
        }else{
            gameConsoleOptions.show();
        }
    });
});

这是一个演示 http://jsfiddle.net/dhirajbodicherla/m178xpc3/10/

你可以做这样的事情

{{1}}

这是一个演示 http://jsfiddle.net/dhirajbodicherla/m178xpc3/5/

Answer 2

这就是你想要的吗？

$(".game-select").on("change", function() {
  var o = $('option:selected', $(this));
  if (!o.val()) {
    $('.game-select optgroup').show();
    $('.console-select option').show();
    return;
  }
  $('.console-select > option').hide();
  var a = $('option:contains("' + o.text() + '")').filter(function() {
    return $(this).text() == o.text();
  }).each(function() {
    var t = $(this);
    var l = t.parent().attr('label');
    $('.console-select option:contains("' + l + '")').filter(function() {
      return l == $(this).text();
    }).show();
  });
});

$(".console-select").on("change", function() {
  var o = $('option:selected', $(this));
  if (!o.val()) {
    $('.game-select optgroup').show();
    $('.console-select option').show();
    return;
  }
  $('.game-select optgroup').hide();
  console.log($('.game-select optgroup[label="' + o.text() + '"]'));
  $('.game-select optgroup[label="' + o.text() + '"]').show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="game-select">
  <option value="">Select a game</option>
  <optgroup label="PS4">
    <option value="c1">Forza Horizon 2</option>
    <option value="c2">The Last of Us</option>
    <option value="c3">Bioshock Infinite</option>
  </optgroup>
  <optgroup label="Xbox One">
    <option value="s1">Forza Horizon</option>
    <option value="s2">Halo</option>
    <option value="s3">Bioshock Infinite</option>
  </optgroup>
</select>

<select class="console-select">
  <option value="">Select a console</option>
  <div>
    <option value="c">PS4</option>
    <option value="s">Xbox One</option>
  </div>
</select>

Answer 3

代码应该说明一切，但这一切都归结为多个jQuery过滤器函数和带有选项的集合的克隆。一个建议：使用数据属性而不是依赖于选项元素文本。我更新了小提琴，请参阅下面的链接。

$(function() {
      var gameConsoles = $(".console-select");
      var consoleOptions = gameConsoles.find('option').clone();
      var gameSelect = $(".game-select").on("change", function() {
          var game = $(this).find("option:selected").text();
          var filteredOptions = $();
          gameSelect.find('optgroup').filter(function() {
              return $(this).find('option').filter(function() {
                  return $(this).text() == game;
              }).length;
          }).each(function () {
              var label = $(this).attr('label');
              filteredOptions = filteredOptions.add(consoleOptions.filter(function() {
                  return $(this).text() == label;
              }));
           });
          gameConsoles.html(filteredOptions);
  });
});

Fiddle update

根据optgroup标签文本过滤选项

3 个答案:

更新2

更新