Question

如何创建第二个下拉菜单中的选项取决于第一个下拉菜单中的选项的表单？问题是我有4个下拉菜单，每个下拉菜单都取决于上一个下拉菜单。

例如：

DROPDOWN＃1选项：英国 /西班牙 /意大利

DROPDOWN＃2选项：（如果选择了英格兰）超级联赛 /冠军 /联赛

（如果选择了意大利）意甲 /意甲B

DROPDOWN＃3选项：（如果选择了英超联赛）切尔西 /曼城 /埃弗顿

....（我希望你明白了）

我尝试从另一个问题中使用此代码，但找不到包含第三个甚至第四个下拉选项的解决方案。

<select id="groups">
<option value='England'>England</option>
<option value='Spain'>Spain</option>
<option value='Italy'>Italy</option>

<select id="sub_groups">
<option data-group='SHOW' value='0'>-- Select --</option>
<option data-group='England' value='Premier'>Premier</option>
<option data-group='England' value='Championship'>Championship</option>
<option data-group='England' value='League One'>League One</option>
<option data-group='Spain' value='La Liga'>La Liga</option>
<option data-group='Spain' value='Second Division'>Second Division</option>
<option data-group='Spain' value='Third Division'>Third Division</option>
<option data-group='Italy' value='Seria A'>Seria A</option>
<option data-group='Italy' value='Seria B'>Seria B</option>

<select id="sub_sub_groups">
    <option data-group='SHOW' value='0'>-- Select --</option>
    <option data-group='Premier' value='Premier'>Chelsea</option>
    <option data-group='La Liga' value='La Liga'>Sevilla</option>
    <option data-group='Seria A' value='Seria A'>Juventus</option>
<select>



$(function(){
$('#groups').on('change', function(){
    var val = $(this).val();
    var sub = $('#sub_groups');
    $('option', sub).filter(function(){
        if (
             $(this).attr('data-group') === val 
          || $(this).attr('data-group') === 'SHOW'
        ) {
          if ($(this).parent('span').length) {
            $(this).unwrap();
          }
        } else {
          if (!$(this).parent('span').length) {
            $(this).wrap( "<span>" ).parent().hide();
          }
        };
    });

});
$('#groups').trigger('change'); {

$('#sub_groups').on('change', function(){

 var subsub = $('#sub_sub_groups');
    $('option', subsub).filter(function(){
        if (
             $(this).attr('data-group') === val 
          || $(this).attr('data-group') === 'SHOW'
        ) {
          if ($(this).parent('span').length) {
            $(this).unwrap();
          }
        } else {
          if (!$(this).parent('span').length) {
            $(this).wrap( "<span>" ).parent().hide();
          }
        }
    });
});
$('#sub_groups').trigger('change');

}

}）;

Answer 1

如何将每个选择项与数字值升序分组并按值作为参考过滤？

可以使用data-group="N"按顺序将每个选择分组。可以通过data-target="N"来确定目标，其中目标是您接下来要显示的组号。当每个列表更改状态时，目标组将根据目标组进行过滤，此外还会被data-ref过滤，var groups = $("select[data-group]"); $("select[data-target]").on("change", function () { var selectedRef = $(this).val(); if (!selectedRef) { groups.hide(); return; } var targetGroup = Number($(this).data('target')); if (targetGroup) { groups.filter(function() { var group = Number($(this).data('group')); return (group === targetGroup || group > targetGroup); }).hide(); groups.filter(`[data-ref="${selectedRef}"]`).show(); } });由当前列表的值引用。因此，显示了相应的列表。

这是一个例子，只有我出于善意填充了第一级部门和俱乐部。但是你要领...

[data-group="1"],
[data-group="2"] {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select data-target="1">
  <option value="">-- Select --</option>
  <option value="England">England</option>
  <option value="Spain">Spain</option>
  <option value="Italy">Italy</option>
</select>

<!-- Tiers by country -->
<select data-group="1" data-target="2" data-ref="England">
  <option value="">-- Select --</option>
  <option value="PremierLeague">Premier League</option>
  <option value="Championship">Championship</option>
  <option value="LeagueOne">League One</option>
  <option value="LeagueTwo">League One</option>
</select>
<select data-group="1" data-target="2" data-ref="Spain">
  <option value="">-- Select --</option>
  <option value="LaLiga">La Liga</option>
  <option value="SegundaDivision">Segunda División</option>
  <option value="SegundaDivision B">Segunda División B</option>
  <option value="TerceraDivision">Tercera División</option>
</select>
<select data-group="1" data-target="2" data-ref="Italy">
  <option value="">-- Select --</option>
  <option value="SerieA">Serie A</option>
  <option value="SerieB">Serie B</option>
  <option value="SerieC">Serie C</option>
</select>

<!-- Teams by tier -->
<select data-group="2" data-ref="PremierLeague">
  <option value="">-- Select --</option>
  <option>Arsenal</option>
  <option>Aston Villa</option>
  <option>Barnsley</option>
  <option>...</option>
</select>
<select data-group="2" data-ref="LaLiga">
  <option value="">-- Select --</option>
  <option>Alavés</option>
  <option>Athletic Bilbao</option>
  <option>Atlético Madrid</option>
  <option>...</option>
</select>
<select data-group="2" data-ref="SerieA">
  <option value="">-- Select --</option>
  <option>Atalanta</option>
  <option>Bologna</option>
  <option>Brescia</option>
  <option>...</option>
</select>

$(function() {
  $('#select-container').on('change', '.select-group', function(event) {
    let groupNext = $(this).data("next");
    let next = $(groupNext);
    next.find("option:selected").prop("selected", false);
    next.trigger('change');//clears child when unset
    let options = next.find('option');
    let selectedValue = $(this).find(":selected").val();
    options.hide();
    let nextOptions = options.filter(function() {
      return $(this).data("group") == selectedValue;
    }).show();
  }).first().trigger('change');
});

Answer 2

就像开始一样设置数据，这里我使用您设置的值。添加更多。

隐藏不匹配的值。如果更改父级，则取消选择。我将由您自己决定如何处理一开始什么都没有选择的情况，我确实在代码中进行了触发。我还将留给您确定在什么都没有选择的情况下如何处理子组的方法-像起初一样，它可以让您从第二和第三选择中进行选择-可能会禁用这些选择，并在父项获得选定值时启用？

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="select-container">
  <select class="select-group" id="groups" data-next="#sub_groups">
    <option value='England'>England</option>
    <option value='Spain'>Spain</option>
    <option value='Italy'>Italy</option>
  </select>
  <select class="select-group" id="sub_groups" data-next="#sub_sub_groups">
    <option data-group='SHOW' value='0'>-- Select --</option>
    <option data-group='England' value='Premier'>Premier</option>
    <option data-group='England' value='Championship'>Championship</option>
    <option data-group='England' value='League One'>League One</option>
    <option data-group='Spain' value='La Liga'>La Liga</option>
    <option data-group='Spain' value='Second Division'>Second Division</option>
    <option data-group='Spain' value='Third Division'>Third Division</option>
    <option data-group='Italy' value='Seria A'>Seria A</option>
    <option data-group='Italy' value='Seria B'>Seria B</option>
  </select>
  <select class="select-group" id="sub_sub_groups">
    <option data-group='SHOW' value='0'>-- Select --</option>
    <option data-group='Premier' value='Premier'>Chelsea</option>
    <option data-group='La Liga' value='La Liga'>Sevilla</option>
    <option data-group='Seria A' value='Seria A'>Juventus</option>
  </select>
</div>

var url = "https://website.com/Game/patches/FooGame/App.config"

当第二个下拉菜单取决于第一个下拉菜单时如何创建表单

2 个答案: