CODEWITHSUNDEEP
javascriptjqueryhtml
Jonathan
Jonathan

Reputation: 2073

Select an option without changing the dropdown's value

Is there a possibility to select an option while the dropdown is open, without having it to close and change the select's value? Like only higlighting it, to be chosen when tabbing out.

Visibly the same as navigating through the options with the arrow-keys while having the select opened.

jQuery is welcome :)

Workarounds welcome :p

<select>
    <option>Option 1 (A)</option>
    <option>Option 2 (B)</option>
    <option>Option 3 (C)</option>
</select>

I need to select the specific option by pressing a char that's in the brackets.

Upvotes: 0

Views: 146

Answers (1)

Robert Lee
Robert Lee

Reputation: 439

In most browsers, this is the default behavior when the letter is at the beginning of the label instead of the end, so you might try that.

Otherwise, you might add a class to the option that should be "highlighted", then use CSS to style that class however you want. You would want to remove that class from all options on mouse move or keydown so the dual highlighting (native plus your CSS) isn't too confusing. I don't know if you can use CSS to remove the native highlighting altogether, but that would be nice. Then it's just a matter of setting the value correctly when the select element loses focus, which is trivial.

Upvotes: 1

Related Questions