如何在Materialize CSS中动态匹配选择输入到选择的选项？

Question

我正在使用 Materialize CSS 1.0.0（所以没有 jQuery），并且我有一个选择下拉菜单，用户可以在其中选择不同的主题（自动、浅色、深色）。默认值为自动（它使用用户的系统偏好 - 亮或暗）。每个页面都有这个下拉菜单。一切正常，除非我打开站点并转到选择并选择，比如说，轻，然后我导航到另一个页面，选择输入显示为自动。但是，下拉菜单选择了灯光（在 Materialise 中，所选项目具有灰色背景），然后当我通过单击下拉菜单而不是单击灯光选项关闭下拉菜单时，输入显示灯光。

所以，重申一下，我选择了默认（自动）以外的主题，该选项在整个站点中被选中，但输入与整个站点中的选定选项不匹配，直到我打开当前选择了主题，然后在其外部单击，然后输入与选择的内容匹配（例如，从自动变为浅色）。这很奇怪，因为除了输入最初与所选选项不匹配外，一切都在正常工作。我认为这是因为我的切换主题的 JS 与 Materialize 的选择“预设”之间存在某种冲突，后者依赖于 materialize.js 文件中自己的 JS。我只使用常规的 HTML 选择测试了切换主题的代码，并且效果很好。输入与整个站点中的选定选项匹配。

因此，它必须是 materialize.js 以及该文件中发生的任何事情。我尝试查看该文件中的代码以查看是否有任何可以更改的内容，但我真的无法在不破坏所有内容的情况下辨别需要更改的内容。

对于我的项目，这将构成一个烦人的小错误。

这是我的代码：

HTML

<div class="input-field">
    <select name="theme" id="theme">
        <option value="auto">Auto</option>
        <option value="light">Light</option>
        <option value="dark">Dark</option>
    </select>
</div>

<script>
    const select = document.querySelector('select');
    M.FormSelect.init(select, {});
</script>

CSS

:root {
    --dark-background-color: black;
    --dark-color: white;
}

body {
    /* Light theme */
    --background-color: white;
    --color: black;

    background-color: var(--background-color);
    color: var(--color);
}

body.theme-dark {
    --background-color: var(--dark-background-color);
    --color: var(--dark-color);   
}

@media (prefers-color-scheme: dark) {
    body.theme-auto {
        --background-color: var(--dark-background-color);
        --color: var(--dark-color);   
    }
}

.input-field input {
    color: var(--color);
}

JS

function applyTheme(theme) {
    document.body.classList.remove('theme-auto', 'theme-light', 'theme-dark');
    document.body.classList.add(`theme-${theme}`);
}

document.addEventListener('DOMContentLoaded', () => {
    const savedTheme = localStorage.getItem('theme') || 'auto';

    applyTheme(savedTheme);

    for (const optionElement of document.querySelectorAll('#theme option')) {
        optionElement.selected = savedTheme === optionElement.value;
    }

    document.querySelector('#theme').addEventListener('change', function() {
        localStorage.setItem('theme', this.value);
        applyTheme(this.value);
    });
});

为选择物化 JS： 编辑：我想我已经把它缩小到有问题的代码。

      /**
       * Handle Input Click
       */

    }, {
      key: "_handleInputClick",
      value: function _handleInputClick() {
        if (this.dropdown && this.dropdown.isOpen) {
          this._setValueToInput();
          this._setSelectedStates();
        }
      }

        // Add input dropdown
        this.input = document.createElement('input');
        $(this.input).addClass('select-dropdown dropdown-trigger');
        this.input.setAttribute('type', 'text');
        this.input.setAttribute('readonly', 'true');
        this.input.setAttribute('data-target', this.dropdownOptions.id);
        if (this.el.disabled) {
          $(this.input).prop('disabled', 'true');
        }

        this.$el.before(this.input);
        this._setValueToInput();

解决方案可能是不使用 Materialise。我想我只是想知道是否有人更熟悉 Materialise 的底层机制（它的 JS）可以在这里找到解决方法。

这是问题的 GIF 动图

Answer 1

将此添加到我的 JS。

// added
const themeSelect = document.getElementById('theme');

const savedTheme = localStorage.getItem('theme');
if (savedTheme) themeSelect.value = savedTheme;

themeSelect.addEventListener('change', function () {
    localStorage.setItem('theme', this.value);
});

奇怪的是，这个解决方案似乎是多余的。问题中的原始JS（不是materialize.js）应该做同样的事情，但它没有做同样的事情，然后添加它，它最终控制了materialize.js文件的输入。也许它们可以合并而不会丢失修复。我们可能永远不会知道。