Javascript 的“selectedIndex”似乎可以工作，但实际上并没有提供与真正点击相同的行为

Question

我有一个 HTML 表单，其中包含来自 W3Schools 的 Javascript 自定义下拉功能。它用一个非常简洁的下拉菜单替换了丑陋的默认下拉菜单，并且在大多数情况下都有效。但是，我遇到了一个问题。

自定义下拉代码使用函数“selectedIndex”来定义当用户点击时应该选择哪个标签。它似乎工作，但我也在使用西西弗斯“保存表单数据”插件，当我刷新页面时，用户更改会丢失。

我知道这不是 Sisyphus 或我的实现的问题，因为如果我取消隐藏默认的原始下拉菜单，我单击它，然后在刷新时保存选项就好了。

这个查询表明，“selectedIndex”函数给出的结果与用户实际点击标签的结果不同。它似乎改变了值，但不知何故并没有真正注册它，令人毛骨悚然....

在阅读了关于stackoverflow的类似问题后，我在“selectIndex”函数下添加了以下两行：尝试以编程方式将其“选定”状态设置为“true”，并触发点击：

s.selectedIndex = i;
s.options[i].selected = true;
s.options[i].click();

仍然没有运气。这是代码的更广泛视图：

// When an item is clicked, update the original select box, and the selected item
for (i = 0; i < sl; i++) {
    if (s.options[i].innerHTML == this.innerHTML) {
        
        //update the original select box
        s.selectedIndex = i;
        s.options[i].selected = true;
        s.options[i].click();
        
        //update the new select box
        h.innerHTML = this.innerHTML;
    }
}

这是 HTML：

<div class="dropdown has-label">
<label for="jours_entiers_de_travail">Number of days</label>
<div class="select-wrapper">
  <select name="jours_entiers_de_travail" id="jours_entiers_de_travail">
  <option value="1">1 day</option>
  <option value="2">2 days</option>
  <option value="3">3 days</option>
  </select>
</div>
</div>

在这个 Codepen 上可以看到完整版本的下拉列表：

https://codepen.io/benviatte/pen/OJNYwRy

这个 codepen 似乎可以工作，但是当我尝试使用由 selectedIndex 分配的值时，问题再次出现，例如 Sisyphus。该值似乎没有正确分配。

非常感谢您的帮助

Answer 1

Sisyphus 文档暗示它使用change 事件来监控表单元素的更新。 Source code 似乎在 bindSaveDataOnChange 函数的 JSDoc 标记中确认了这一点。

因此，请尝试在选择框上触发更改事件，而不是以编程方式单击选项元素。未经测试但可能喜欢

    //update the original select box
    s.selectedIndex = i;
    s.options[i].selected = true;
    // s.options[i].click();    // replace with:
    $(s).trigger("change");     // trigger change event on select box

另请参阅Trigger change event <select> using jquery，了解在 jQuery 和纯 JavaScript 中触发更改事件的各种方式，以及trigger() | jQuery API Documentation。