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

Question

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

所以，重申一下，我 select 一个不同于默认（自动）的主题，该选项在整个站点 selected，但输入与 selected 选项，直到我打开当前主题为 selected 的下拉列表，然后单击它的外部，然后输入匹配 selected 的内容（从自动更改为光，例如）。这很奇怪，因为除了输入最初与 selected 选项不匹配外，一切正常。我认为这是因为我的用于切换主题的 JS 与 Materialise 的 select“预设”之间存在某种冲突，后者依赖于 materialize.js 文件中自己的 JS。我仅使用常规 HTML select 测试了用于切换主题的代码，它运行良好。输入与整个站点的 selected 选项匹配。

所以，它必须是 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);
    });
});

为 Select 实现 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();

解决方案可能是不使用 Materialize。我想我只是想知道是否有人更熟悉 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 文件中的输入。也许可以在不丢失修复的情况下合并它们。我们可能永远不会知道。

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

How to match select input to selected option dynamically in Materialize CSS?

html

javascript

css

materialize