Materialise CSS 中断事件侦听器以更改下拉列表中的选定值

Question

目标是通过按下按钮重置下拉列表的值。使用 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”。但是，只要我将 materialize CSS 添加到我的 HTML，当我单击该按钮时，下拉列表中的值就不会改变。我知道事件侦听器被触发，因为每当我按下按钮时，控制台中都会显示“已执行”。但是，下拉菜单中的值并没有像以前在原版 javascript/html 中那样发生变化。这怎么会发生，我该怎么做才能解决这个问题以找到源头？

HTML/JS 实现 CSS:

$(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”，然后您甚至 select 另一个选项。

Answer 1

更新 select 元素后，您可以在 eventListener 中重新初始化插件。

除了我的代码，你应该将初始化外包给一个函数以保持 DRY。

$(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();
})

<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>

Materialise CSS 中断事件侦听器以更改下拉列表中的选定值

Materialize CSS breaks event listener for changing selected value in dropdown list

html

javascript

materialize