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

Question

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

例如:

下拉列表 #1 选项: 英国 /西类牙 /意大利

下拉 #2 选项: (如果选择英格兰) super 联赛 /锦标赛 /联赛一

(如果选择了意大利) 意甲 /意乙

下拉列表 #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" 来定位，其中 target 是您希望接下来显示的组号。当每个列表更改状态时，目标组由目标组过滤，此外由当前列表的值引用的 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>