javascript - 複数選択ボックスのオプションにフォーカスを移動する方法

Question

複数選択ボックスのオプションにフォーカスを当てたい。複数選択ボックスのオプションの1つに点線の境界線(画像を参照するにはここをクリック)が必要で、オプションを完全に選択したくありません。

document.getElementById("multiple_dropdown").options[2].focus(); のようなものを試しました。しかし、うまくいきませんでした。

何か案は ？

ありがとう。

Answer 1

さらに調査した結果、複数の選択ボックスのオプションに焦点を当てる方法に関して、さまざまなブラウザーのデフォルトの動作を変更しようとする価値がないことがわかりました。これは、ブラウザーが < にアクセスするために提供するオプションがあまりないためです。複数のドロップダウンのオプション> 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これにより、要素の 3 番目 (オプション カウントが 0 から始まるため)の要素にアクセスできるようになります<select id="multiple_dropdown">。どういうわけかそれを選びたい場合はbackground-color、次のように使用することをお勧めします。

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