显示默认 SELECTED 选项的动态多个 select 菜单

Question

我有：

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

我想达到的目标：

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

问题：

当我将 selected 属性添加到第一个选项菜单时，一切正常。当我尝试更改其他 child <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>

Answer 1

最后 $("[data-child]").eq(0).trigger("change");，您将触发第一个 select 中的选项，并且尽管设置 selected 属性到任何选项。这就是它不起作用的原因。

更新： 无需在 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>

显示默认 SELECTED 选项的动态多个 select 菜单

Dynamic multiple select menus showing default SELECTED options

html

javascript

jquery

html-select