Question

在我的项目中，我保存了select元素的值，并在页面加载时将它们设置为用户上次选择的值。以前只需设置.value = "x"就可以了，但现在我无法设置值，我只能根据Materialize文档使用instance.getSelectedValues();获取这些值？

const selectedCategory = document.querySelector('#category');
const materializeSelectedCategory = M.FormSelect.init(selectedCategory);

...然后准备好文件

materializeSelectedCategory.value = "SET VALUE"; // This does not work...

无法弄清楚如何设置Materialise.css下拉列表的值。我用多个。

我不使用jQuery 。

Answer 1

无法弄清楚如何设置Materialise.css下拉列表的值。 materializeSelectedCategory.value =“SET VALUE”; //这不起作用......

您需要使用 selectedCategory 并调度更改事件：

selectedCategory.value = "1";
if (typeof(Event) === 'function') {
    var event = new Event('change');
} else {  // for IE11
    var event = document.createEvent('Event');
    event.initEvent('change', true, true);
}
selectedCategory.dispatchEvent(event);

const selectedCategory = document.querySelector('#category');
const materializeSelectedCategory = M.FormSelect.init(selectedCategory);

selectedCategory.value = "1";
if(typeof(Event) === 'function') {
    var event = new Event('change');
}else{
    var event = document.createEvent('Event');
    event.initEvent('change', true, true);
}
selectedCategory.dispatchEvent(event);

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>


<div class="input-field col s12">
    <select id="category">
        <option value="" disabled selected>Choose your option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>
    <label>Materialize Select</label>
</div>

Answer 2

重新初始化组件

在底层 change 上调度 HTMLSelectElement 事件的另一种方法是在设置 value 之后简单地重新初始化组件。每次以编程方式更改值而不是用户交互时，您都必须这样做（不过，init 方法很快）：

(() => {
  M.AutoInit();

  const start = document.getElementById('start');
  const end = document.getElementById('stop');

  const cat = document.getElementById('category');
  const out = document.getElementById('manual');
  const aut = document.getElementById('auto');
  
  let interval;
  
  document.addEventListener('change', ({ target }) => {
    out.textContent = target.value;
  })
  
  start.addEventListener('click', () => {
    if(interval) return;
  
    interval = setInterval(() => {
      cat.value = (Math.random() * 2).toFixed(0);  
      const inst = M.FormSelect.init(cat);
      aut.textContent = inst.getSelectedValues().join(", ");
    }, 1e3);
  });
      
  end.addEventListener('click', () => {
    interval && clearInterval(interval);
  });
  
})();

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


<div class="input-field col s12">
    <select id="category">
        <option value="0" disabled selected>Choose your option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>
    <label>Materialize Select</label>
</div>

<p>
  Via value: <span id="manual"></span><br>
  Via getSelectedValues: <span id="auto"></span>
</p>

<button type="button" id="start">Start</button>
<button type="button" id="stop">Stop</button>

使用Materialize.css 1.0.0设置下拉选择值而不使用jQuery

2 个答案: