Javascript的“ selectedIndex”似乎可以正常工作，但实际上却无法提供与实际点击相同的行为

问题描述

我有一个HTML表单，带有从W3Schools获取的Javascript自定义下拉功能。它用一个真正整洁的替换了丑陋的默认下拉列表，并且在大多数情况下都可以使用。但是，我遇到了一个问题。

自定义下拉代码使用函数“ selectedindex”来定义用户单击时应选择哪个标签。似乎可行，但是我还使用了Sisyphus的“保存表单数据”插件，刷新页面时，用户更改丢失了。

我知道Sisyphus或我的实现都没有问题，因为如果取消隐藏默认的原始下拉菜单，请单击它，并在刷新后保存选项。

此查询表明，“ selectedindex”功能所产生的结果与用户实际单击标签时所产生的结果完全不同。它似乎更改了该值，但实际上并没有真正注册它，令人毛骨悚然....

在阅读了关于stackoverflow的类似问题之后，我在“ selectIndex”函数下添加了以下两行：尝试以编程方式将其“ selected”状态设置为“ 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一起使用）时，问题再次出现。该值似乎未正确分配。

非常感谢您的帮助

解决方法

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中触发变更事件的各种方式。