如何动态更新具体化 <select>？

Question

我有一个带有多个选项的 select 标签。我正在使用 materizlizecss select，我想使用 javascript 根据特定条件禁用某些选项。我已经阅读了另一篇关于如何执行此操作的 post，但我需要在没有 jquery 的情况下执行此操作。当我尝试时，没有任何反应。控制台中也没有错误或警告。

<form id="code-form">
            <h4 style="color: black;">Generate Code</h4>
            <div class="input-field">
                <select name="security-select" id="security-select">
                  <option style="display: none;" id="webmaster-value" value="1">Webmaster</option>
                  <option id="scoutmaster-value" value="2">Scoutmaster</option>
                  <option id="general-admin-value" value="3">General Admin</option>
                  <option id="spl-value" value="4">Senior Patrol Leader</option>
                  <option selected id="standard-user-value" value="5">Standard User</option>  
                </select>
            </div>
            <button class="btn deep-purple" id="add-code">Generate Code</button>
        </form>

.

 if (security == '2') {
        document.querySelector('#webmaster-value').setAttribute('disabled', 'disabled')
    }

Answer 1

您必须在编辑后重新初始化 select 字段

document.addEventListener('DOMContentLoaded', function () {
  var elems = document.querySelectorAll('select');
  var instances = M.FormSelect.init(elems);
});

document.getElementById("change-code").addEventListener("click", function () {
  document.querySelector('#webmaster-value').setAttribute('disabled', 'disabled');
  // Re-Initialize select
  var elems = document.querySelectorAll('select');
  var instances = M.FormSelect.init(elems);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<form id="code-form">
    <h4 style="color: black;">Generate Code</h4>
    <div class="input-field">
        <select name="security-select" id="security-select">
            <option style="display: none;" id="webmaster-value" value="1">Webmaster</option>
            <option id="scoutmaster-value" value="2">Scoutmaster</option>
            <option id="general-admin-value" value="3">General Admin</option>
            <option id="spl-value" value="4">Senior Patrol Leader</option>
            <option selected id="standard-user-value" value="5">Standard User</option>
        </select>
    </div>
    <button type="button" class="btn deep-purple" id="change-code">Press to disable</button>
</form>

如何动态更新具体化 <select>？

How can I dynamically update materialize <select>?

javascript

materialize