Javascript 的 "selectedIndex" 似乎有效，但实际上并没有提供与真正点击相同的行为

Question

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

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

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

此查询显示“selectedIndex”函数给出的结果与用户实际单击标签时的结果并不完全相同。它似乎改变了值，但不知何故并没有真正注册它，令人毛骨悚然....

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

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

这个代码笔似乎可以工作，但是当我尝试使用 selectedIndex 分配的值时，问题又来了，例如 Sisyphus。该值似乎未正确分配。

非常感谢您的帮助

Answer 1

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

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

    //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 for a variety of ways of triggering change events in both jQuery and plain JavaScript, and trigger() | jQuery API Documentation。

Javascript 的 "selectedIndex" 似乎有效，但实际上并没有提供与真正点击相同的行为

Javascript's "selectedIndex" appears to work, but actually doesn't give the same behavior as a real click

javascript

html

selectedindex