时间戳

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

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

问题描述

我有一个 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。该值似乎没有正确分配。

非常感谢您的帮助

标签： javascripthtmlselectedindex

解决方案

Sisyphus 文档暗示它使用change事件来监视表单元素的更新。源代码似乎在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

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

推荐阅读