javascript - 如何使用 Materialise 触发选择更改

Question

在普通的 select 标签上，我可以使用 $('select').val(2).change() 触发 jQuery 的更改事件。这不适用于 Materialise select 标签。

$(document).ready(function() {
  $('select').formSelect();
  
  $('button').on('click', function() {
    //$('select').val(Math.floor(Math.random() * 3) + 1).change(); // Does not work
    
    $('select').val(Math.floor(Math.random() * 3) + 1).formSelect();
  });
});

.wrapper {
  display: flex;
  justify-content: space-around;
  padding: 2rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>

<div class="wrapper">
  <select>
    <option value="">Selecione</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
  <button class="btn">Change</button>
</div>

我能够使用 $('select').val(2).formSelect() 完成这项工作，但我不知道这是否是使用此函数的正确方法初始化 Materialize 上的选择，但我还没有找到有关它的文档。这是实现这一目标的“正确”方法还是有更好的解决方案？

谢谢。

Answer 1

我认为这是正确的方法，您必须在更改其值后重新初始化select元素

If you want to update the items inside the select, just rerun the initialization code from above after editing the original select. Or you can destroy the material select with this function below, and create a new select altogether Materializecss Docs

var select = $('select');
// initialize
select.formSelect();

$('button').on('click', function() {
    // change
  select.val(2);
  // re-initialize material
  select.formSelect();
});