Materialise CSS 中断事件侦听器以更改下拉列表中的选定值|软件开发问答库

目标是通过按下按钮重置下拉列表的值。使用 vanilla javascript 和 html，以下代码可以正常工作：

HTML/JS：

button = document.getElementById('button')
button.addEventListener('click', e => {
  console.log('executed')
  document.getElementById('sel').value = 'bike'
})

<select id="sel">
  <option value="car">1</option>
  <option value="bike">2</option>
  <option value="cycle">3</option>
</select>
<button id="button">Test</button>

正如预期的那样，按下按钮时，下拉列表中会列出值“2”。但是，一旦我将物化 CSS 添加到我的 HTML 中，当我单击按钮时，下拉列表中的值就不会改变。我知道事件侦听器被触发，因为每当我按下按钮时，控制台中都会显示“已执行”。但是，下拉菜单中的值不会像以前在 vanilla javascript/html 中那样改变。怎么会发生这种情况，我该怎么做才能解决此问题以找到来源？

带有实体化 CSS 的 HTML/JS：

$(document).ready(function() {

  // Initialize materialize data picker
  $('.datepicker').datepicker({
    'format': 'yyyy-mm-dd'
  });
  $('select').formSelect();
});
button = document.getElementById('button')
button.addEventListener('click', e => {
  console.log('executed')
  document.getElementById('sel').value = 'bike'
})

<html>

<head>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.1/css/materialize.min.css" integrity="sha256-qj3p6P1fJIV+Ndv7RW1ovZI2UhOuboj9GcODzcNFIN8=" crossorigin="anonymous" />
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.1/js/materialize.min.js" integrity="sha256-SrBfGi+Zp2LhAvy9M1bWOCXztRU9Ztztxmu5BcYPcPE=" crossorigin="anonymous"></script>
</head>

<body>
  <select id="sel">
    <option value="car">1</option>
    <option value="bike">2</option>
    <option value="cycle">3</option>
  </select>
  <button id="button" type="button" class="bold waves-effect waves light btn-large teal lighten-2">Test</button>
</body>

</html>

感谢提供编辑以使此可执行文件的人。多玩几次后，我注意到按下按钮后，如果您再次单击下拉菜单，则在您选择另一个选项之前，值会自动更改为“2”。

$(document).ready(function() { // Initialize materialize data picker $('.datepicker').datepicker({ 'format': 'yyyy-mm-dd' }); $('select').formSelect(); }); button = document.getElementById('button') button.addEventListener('click', e => { console.log('executed') document.getElementById('sel').value = 'bike' $('.datepicker').datepicker({ 'format': 'yyyy-mm-dd' }); $('select').formSelect(); })