下拉菜单 – Elm HTML select中的奇怪行为

下拉菜单 – Elm HTML select中的奇怪行为,第1张

概述我在一个带有 HTML select元素的小型Elm程序中遇到了奇怪的行为. 选项最初包括值为“”的空第一项和值为“bar”,“baz”和“foo”的3个附加项. 最初显示页面时,按预期选择空的第一个项目. 如果单击下拉列表并从列表中选择“bar”,则下拉列表会显示,并选择“baz”,而不是“bar”.请注意,选择项目时,将重新呈现select元素,而不使用空的第一个选项. Here是演示此问题的 我在一个带有 HTML select元素的小型Elm程序中遇到了奇怪的行为.

选项最初包括值为“”的空第一项和值为“bar”,“baz”和“foo”的3个附加项.

最初显示页面时,按预期选择空的第一个项目.

如果单击下拉列表并从列表中选择“bar”,则下拉列表会显示,并选择“baz”,而不是“bar”.请注意,选择项目时,将重新呈现select元素,而不使用空的第一个选项.

Here是演示此问题的代码.

为什么会这样?我应该在选择选项中留下空的第一项吗?这将在下拉列表中留下一个空的“插槽”.这可以避免吗?

我最初在Chrome中发现了这一点,但它也出现在firefox中,因此我怀疑我违反了HTML规范中的内容.

解决方法 首先,我只是想说,谢谢你将问题隔离开来,并给我们一个展示问题的小样本项目.它需要一些挖掘,但我发现HTML’selected’属性,是在页面加载时设置选定的值.因此,在页面加载后更新它将导致奇怪的行为,我们将改为使用“值”.另一方面,忽略页面加载时设置’值’!谢谢你! ;)来源 here

见修订代码here

总结

以上是内存溢出为你收集整理的下拉菜单 – Elm HTML select中的奇怪行为全部内容,希望文章能够帮你解决下拉菜单 – Elm HTML select中的奇怪行为所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1071182.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-26
下一篇 2022-05-26

发表评论

登录后才能评论

评论列表(0条)

保存