Question

下一个想法是

有两个下拉列表，它们是动态填充的，页面加载时第一个只有一次，但是每次单击第一个列表时，第二个下拉列表应动态填充，其内容取决于第一个列表中的所选项目列表，我使用jQuery动态填充下拉列表。

整个页面上的所有内容都包裹在几个选项卡上，并包含TinyMCE编辑器。我尝试将jQuery与MaterialiseCSS的不同版本配合使用，但遇到了不同的问题（布局中断或“不可点击/下拉”列表）。

使用不带jQuery的M实例可以解决所有先前的问题，但是我没有找到有关如何使用它处理onClick事件以及如何再次初始化动态更新的下拉列表的文档？

HTML：

<!-- In head: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css"> -->
<!-- First Dropdown list -->
<div class="col s4 m2">
  <div class="nav-wrapper mar-top-20">
    <!-- https://materializecss.com/dropdown.html -->
    <!--Dropdown Trigger -->
    <a id="rec-years-trigger" class="dropdown-trigger waves-effect waves-light btn w100 avio" href="#" data-target="dropdown1">
      <?=data.currentMonth ?> <i class="medium material-icons right">arrow_drop_down</i>
    </a>
    <!-- Dropdown Structure -->
    <ul id="dropdown1" class="dropdown-content"></ul>
  </div>
</div>
<!-- Second Dropdown list -->
<div class="col s6 m8">
  <div class="nav-wrapper mar-top-20">
    <!-- https://materializecss.com/dropdown.html -->
    <!--Dropdown Trigger -->
    <a id="post-list-trigger" class="dropdown-trigger waves-effect waves-light btn w100 avio" href="#" data-target="dropdown2">
      Posts<i class="medium material-icons right">arrow_drop_down</i>
    </a>
    <!-- Dropdown Structure -->
    <ul id="dropdown2" class="dropdown-content icons"></ul>
  </div>
</div>

JavaScript：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
...

document.addEventListener('DOMContentLoaded', function() {
  //generate a list:
  for (var i = 0; i < recYears.length; i++) {
    var newValue = recYears[i];
    var el = '<li><a href="#!" class="dropdown-button">' + newValue + '</a></li>';
    $("#dropdown1").append(el);
  };

  var elems = document.querySelectorAll('.dropdown-trigger');
  var instances = M.Dropdown.init(elems, {
    belowOrigin: true
  });
  //Somewhere here OnClick EventHandler to populate second Dropdown list dynamically...
});

MaterializeCSS 1.0.-rc.2没有jQuery的下拉列表。如何挂钩onClick事件？

0 个答案: