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()来完成这项工作，但我不知道这是否正确，因为此函数用于初始化Materialise上的选择，而我还没有找到有关它的文档。这是实现这一目标的“正确”方法还是有更好的解决方案？

谢谢。

Answer 1

我认为这是正确的方法，您必须在更改其值后重新初始化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();
});

如何使用Materialize触发选择更改

2 个答案: