显示默认 SELECTED 选项的动态多选菜单答案

【问题标题】：Dynamic multiple select menus showing default SELECTED options显示默认 SELECTED 选项的动态多选菜单
【发布时间】：2020-07-28 08:11:34
【问题描述】：

我有什么：

我有四个<select><option></option></select> 菜单。当用户更改 4 个中的任何一个（如果有可用选项）的值时，子 <select> 会相应地更改那里的值。当子值没有<option> 值时，<select> 将从视图中隐藏。

我想达到的目标：

我尝试选择默认的<option selected></option>，例如我想在页面加载时设置默认选择的选项Windows > Windows 8 > Windows 8 pro > Windows 8 pro B

问题：

当我将selected 属性添加到第一个选项菜单时，一切正常。当我尝试更改另一个子 <select> 菜单时，selected 属性会被忽略。

守则： (Codepen)

$("[data-child]").change(function() {
  const selectedGroup = $(this).val();
  if (selectedGroup == null) {
    $('#' + $(this).attr('id')).hide();
  } else {
    $('#' + $(this).attr('id')).show();
  }
  var $childSelect = $("#" + $(this).attr("data-child"));
  value = $childSelect.find("option").hide()
    .filter(function(i, e) {
      return $(e).val().startsWith(selectedGroup)
    }).show().eq(0).val();
  $childSelect.val(value);
  $childSelect.trigger("change");
});
$("[data-child]").eq(0).trigger("change");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row" style="margin-left: auto; margin-right: auto; padding-top: 50px">
  <div class="col-3">
    <span>Operating system</span>
    <select data-child="niv1" class="selectdata form-control custom-select">
      <option value="1-1">Android</option>
      <option value="1-2">Linux</option>
      <option value="1-3" selected>Windows</option>
    </select>
  </div>
  <div class="col-3">
    <span>System version</span>
    <select id="niv1" data-child="niv2" class="selectdata form-control custom-select">
      <option data-group="1-1" value="1-1-1">9.0 Pie</option>
      <option data-group="1-2" value="1-2-1">Ubuntu</option>

      <option data-group="1-3" value="1-3-1">Windows 7</option>
      <option data-group="1-3" value="1-3-2" selected>Windows 8</option>
      <option data-group="1-3" value="1-3-3">Windows 10</option>
    </select>
  </div>
  <div class="col-3">
    <span>Edition</span>
    <select id="niv2" data-child="niv3" class="selectdata form-control custom-select">
      <option data-group="1-3-1" value="1-3-1-1">Windows 7 Home</option>
      <option data-group="1-3-1" value="1-3-1-2">Windows 7 Pro</option>

      <option data-group="1-3-2" value="1-3-2-1">Windows 8 Home</option>
      <option data-group="1-3-2" value="1-3-2-2" selected>Windows 8 Pro</option>

      <option data-group="1-3-3" value="1-3-3-1">Windows 10 Home</option>
      <option data-group="1-3-3" value="1-3-3-2">Windows 10 Pro</option>
    </select>
  </div>
  <div class="col-3">
    <span>Build</span>
    <select id="niv3" data-child="niv4" class="selectdata form-control custom-select">
      <option data-group="1-3-1-2" value="1-3-1-2-1">Win 7 Pro - A</option>
      <option data-group="1-3-1-2" value="1-3-1-2-2">Win 7 Pro - B</option>

      <option data-group="1-3-2-1" value="1-3-2-1-1">Win 8 Home - A</option>
      <option data-group="1-3-2-1" value="1-3-2-1-2">Win 8 Home - B</option>

      <option data-group="1-3-2-2" value="1-3-2-2-1">Win 8 Pro - A</option>
      <option data-group="1-3-2-2" value="1-3-2-2-2" selected>Win 8 Pro - B</option>

      <option data-group="1-3-3-1" value="1-3-3-1-1">Win 10 Home - A</option>
      <option data-group="1-3-3-1" value="1-3-3-1-2">Win 1 Home - B</option>

      <option data-group="1-3-3-2" value="1-3-3-2-1">Win 10 Pro - A</option>
      <option data-group="1-3-3-2" value="1-3-3-2-2">Win 10 Pro - B</option>
    </select>
  </div>
</div>

【问题讨论】：

标签： javascript html jquery html-select

【解决方案1】：

最后通过这个$("[data-child]").eq(0).trigger("change");，您将触发第一个select 中的选项，尽管将selected 属性设置为任何选项，您的剩余选择仍会根据您的change 函数自动设置。这就是它不起作用的原因。

更新：无需在 HTML 中设置初始选项，您也可以通过 jQuery 执行此操作。只需在$("[data-child]").eq(0).trigger("change");这一行下方设置其他选项即可通过这种方式实现您的目标。

$("[data-child]").change(function () {
    const selectedGroup = $(this).val();
    if (selectedGroup == null) {
        $('#' + $(this).attr('id')).hide();
    } else {
        $('#' + $(this).attr('id')).show();
    }

    var $childSelect = $("#" + $(this).attr("data-child")), index;
    value = $childSelect.find("option").hide()
        .filter(function (i, e) {
            return $(e).val().startsWith(selectedGroup)

        }).show().eq(0).val();

    $childSelect.val(value);
    $childSelect.trigger("change");
});

$("[data-child]").eq(0).trigger("change");

$('#niv1').val("1-3-2").change();
$('#niv2').val("1-3-2-2").change();
$('#niv3').val("1-3-2-2-2").change();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row" style="margin-left: auto; margin-right: auto; padding-top: 50px">
    <div class="col-3">
        <span>Operating system</span>
        <select data-child="niv1" class="selectdata form-control custom-select">
            <option value="1-1">Android</option>
            <option value="1-2">Linux</option>
            <option value="1-3" selected>Windows</option>
        </select>
    </div>
    <div class="col-3">
        <span>System version</span>
        <select id="niv1" data-child="niv2" class="selectdata form-control custom-select">
            <option data-group="1-1" value="1-1-1">9.0 Pie</option>
            <option data-group="1-2" value="1-2-1">Ubuntu</option>

            <option data-group="1-3" value="1-3-1">Windows 7</option>
            <option data-group="1-3" value="1-3-2">Windows 8</option>
            <option data-group="1-3" value="1-3-3">Windows 10</option>
        </select>
    </div>
    <div class="col-3">
        <span>Edition</span>
        <select id="niv2" data-child="niv3" class="selectdata form-control custom-select">
            <option data-group="1-3-1" value="1-3-1-1">Windows 7 Home</option>
            <option data-group="1-3-1" value="1-3-1-2">Windows 7 Pro</option>

            <option data-group="1-3-2" value="1-3-2-1">Windows 8 Home</option>
            <option data-group="1-3-2" value="1-3-2-2">Windows 8 Pro</option>

            <option data-group="1-3-3" value="1-3-3-1">Windows 10 Home</option>
            <option data-group="1-3-3" value="1-3-3-2">Windows 10 Pro</option>
        </select>
    </div>
    <div class="col-3">
        <span>Build</span>
        <select id="niv3" data-child="niv4" class="selectdata form-control custom-select">
            <option data-group="1-3-1-1" value="1-3-1-1-1">Win 7 Home - A</option>
            <option data-group="1-3-1-1" value="1-3-1-1-2">Win 7 Home - B</option>

            <option data-group="1-3-1-2" value="1-3-1-2-1">Win 7 Pro - A</option>
            <option data-group="1-3-1-2" value="1-3-1-2-2">Win 7 Pro - B</option>

            <option data-group="1-3-2-1" value="1-3-2-1-1">Win 8 Home - A</option>
            <option data-group="1-3-2-1" value="1-3-2-1-2">Win 8 Home - B</option>

            <option data-group="1-3-2-2" value="1-3-2-2-1">Win 8 Pro - A</option>
            <option data-group="1-3-2-2" value="1-3-2-2-2">Win 8 Pro - B</option>

            <option data-group="1-3-3-1" value="1-3-3-1-1">Win 10 Home - A</option>
            <option data-group="1-3-3-1" value="1-3-3-1-2">Win 1 Home - B</option>

            <option data-group="1-3-3-2" value="1-3-3-2-1">Win 10 Pro - A</option>
            <option data-group="1-3-3-2" value="1-3-3-2-2">Win 10 Pro - B</option>
        </select>
    </div>
</div>

【讨论】：

删除 $("[data-child]").eq(0).trigger("change"); 时的问题是它不再隐藏
好的，让我检查一下。
@Crezzur，我已经更新了我的答案。看看这是否是您的标准。
非常感谢！我已经尝试过 "$('#niv1').val("1-3-2")" 但忘记了 change() 部分：D 谢谢！
很高兴，:)