如何使用Materialize触发select更改

Question

在一个普通的select标签上，我可以使用$('select').val(2).change()通过jQuery触发一个更改事件。这不适用于Materialize 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上的selects，而且我还没有找到相关的文档。这是实现这一目标的“正确”方法，还是有更好的解决方案？

谢谢。

Answer 1

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

如果您想要更新select中的项，只需在编辑原始select之后从上面重新运行初始化代码。或者，您可以使用下面的函数销毁材料选择，然后创建一个新的完全选择Materializecss Docs

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

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

Answer 2

var select = $("select#TeamListId");

// initialize
select.formSelect();
console.log(select);
    
$(select).on("change", function(e) {
    teamNameId = $(this).val();
    console.log("\n\nteamNameId", teamNameId);
    myTable.search(teamNameId).draw();
});