javascript - 如何将焦点放在多个选择框中的选项上

Question

我想将重点放在多个选择框中的一个选项上。我只想要多选框中的一个选项上的虚线边界线（单击此处参考图像），并且不希望该选项被完全选中。

我尝试了类似 document.getElementById("multiple_dropdown").options[2].focus(); 但没有用。

有任何想法吗 ？

谢谢。

Answer 1

经过更多调查，我发现不值得花时间尝试更改不同浏览器的默认行为，即它们如何专注于多选框中的选项，原因是浏览器提供的访问 < option>s 在多个下拉列表中。

Browser | What happens on focus of multiple dropdown after reset ?                     | Is there provision to style/focus a particular option in multiple dropdown ?
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------
FF      | Dotted outline border on the very first option in the multiple dropdown      | We can’t set focus on a particular option, but will be able to style particular option like a dotted blue border or background etc.
IE      | Dotted outline border on the lastly selected option in the multiple dropdown | Doesn’t provide way to style/focus particular option in a multiple dropdown
Chrome  | No dotted outline on the option but a Solid thick blue border on the whole multiple dropdown itself | Doesn’t provide way to style/focus particular option in a multiple dropdown
Mac     | Same as chrome (as both are webkit family)                                   | Doesn’t provide way to style/focus particular option in a multiple dropdown

Answer 2

不幸的是，并非所有浏览器都支持元素border的 css 属性。optionAFAIK Firefox 可以，但这是唯一的一个。所以你不能只是给它做一个边界。
如果你想选择一些选项，你可以使用 JQuery 的

$($("#multiple_dropdown").children()[2])

option这将使您可以访问元素的第三个（因为选项计数从零开始）<select id="multiple_dropdown">元素。如果您想以某种方式将其挑选出来，我可以为您提供 use background-color，例如：

$($("#multiple_dropdown").children()[2]).css('background-color', 'blue')