我正在尝试调试我今天遇到过的一件事，据我所知，这只发生在Safari上：
我有一个标准的select元素，带有选项元素，每个元素都有value属性。在选择更改时，我触发on-change事件并使用$(e.target).val()来获取所选的选项值属性。现在这适用于所有浏览器但也适用于Safari。
例如，我有value="13"的元素，当它被选中时，$(e.target).val()在Safari中返回23，在Chrome或Firefox等中更正。
通过调用返回正确属性的e.target.value找到解决方法。不过，我想知道可能导致这种行为的原因。
有没有人经历过类似的事情？
答案 0 :(得分：0)
找到行为的原因，以防万一其他人遇到同样的问题。
由于Safari不接受在选项元素上调用display: none;，因此我使用了小型jQuery插件：https://gist.github.com/tomdracz/b165d9734aa25ba5aebf
这会将<span>标记中的选项包含display: none;并隐藏元素。但是这会导致.val()返回第一个选择选项的值，甚至包含在span中而不是选中的选项。有趣的是，添加:selected选择器，返回正确的选择器。不幸的是，我正在使用的Rails app只是在ujs中调用val()，据我所知，它打破了从表单传递的参数。
解决方案是将选项列表保存在变量中，并在更改时从DOM中分离未使用的选项。然后在下一次更改时，我再次附加选项以使所有选项都可用于过滤。