Why is my select element not changing options?

Question

I am using Jquery and Jquery-UI 1.7.2. The code itself is a tampermonkey script with the grants necessary for GM_setValue and GM_getValue already written. The part of the code that has the issue is the part where the select element should get updated to have the selected option as the option saved in GM at the start of the document. The select element simply doesn't show the saved option and stays on the default first option. I have tried nearly everything and have no idea what is wrong with the code.

I have tried debugging my code and tried using different methods to achieve what I wanted but nothing seems to work. I've also checked other problems similar to this but the solutions on the other posts haven't seemed to work in my case.

<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>
      </select>
</div>

$('.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)});
})

Answer 1

Looks like you are trying to change the value of the outer container. specifically the with the class .feature-select. However you should target the inner element to update its value.

You're using both the old (GM_getValue) and the new (GM.setValue) Tampermonkey APIs together.you should stick to one version, either all old-style or all new-style methods for a more efficient approach. Hope this helps