Tampermonkey脚本中select元素无法加载GM存储选项问题

问题场景 #

使用jQuery和jQuery UI 1.7.2开发Tampermonkey脚本，已配置GM_setValue与GM_getValue的必要权限。页面初始化时，select元素应选中GM存储的选项，但始终停留在默认第一个选项，调试及更换实现方法均无效。

原HTML代码 #

<div class="feature-select" id="element-type">
      <select>
        <option value="water" selected>Water</option>
        <option value="earth">Earth</option>
        <option value="land">Land</option>
        <option> <!-- 标签未闭合，会导致DOM解析异常 -->
      </select>
</div>

原JS代码 #

$('.feature-select').each(function() {
    this.value = GM_getValue(`velocity.data.${$(this).attr('id').split("-")[0]}.type`, "")
    $(this).addEventListener('change', function (e) {GM.setValue(`velocity.data.${$(this).attr('id').split("-")[0]}.type`, e.target.value); console.log(e.target.value)});
})

问题分析 #

1. 遍历对象错误：代码遍历的是.feature-select类的div容器，而非内部的select元素，给div赋值this.value完全无效。
2. 事件绑定方式错误：jQuery对象不能直接调用原生的addEventListener方法，需改用jQuery的事件绑定API。
3. HTML结构缺陷：最后一个option标签未闭合，可能干扰浏览器对select选项的解析。
4. 默认值问题：GM_getValue的默认值为空字符串，若存储值不存在或不匹配选项值，select会自动选中第一个默认选项。

修复后的代码 #

修复后的HTML（闭合option标签） #

<div class="feature-select" id="element-type">
      <select>
        <option value="water" selected>Water</option>
        <option value="earth">Earth</option>
        <option value="land">Land</option>
        <option value="other">Other</option> <!-- 补充value并闭合标签 -->
      </select>
</div>

修复后的JS代码 #

$('.feature-select').each(function() {
    // 获取当前div内的select元素
    const $select = $(this).find('select');
    // 拼接存储键
    const storageKey = `velocity.data.${$(this).attr('id').split("-")[0]}.type`;
    // 从GM存储获取值，默认设为第一个选项的value
    const savedValue = GM_getValue(storageKey, 'water');
    // 设置select的选中值
    $select.val(savedValue);
    
    // 用jQuery的on方法绑定change事件
    $select.on('change', function() {
        const selectedValue = $(this).val();
        GM_setValue(storageKey, selectedValue);
        console.log(selectedValue);
    });
})

额外注意事项 #

• 确认GM存储中velocity.data.element.type对应的值是water/earth/land/other中的一个，若存储值无效，select仍会回退到默认选项。
• 若页面是动态加载的select元素，需确保代码在元素渲染完成后执行（可使用setTimeout或监听DOM变化事件）。

内容的提问来源于stack exchange，提问作者deniz