All geek questions in one place

Make the selected option in the selection window is always displayed at the top

In the selection box that I use, there are 4 top-level options, each of which has a list of options below. The selected one is displayed at the bottom of the list, which means that the user still needs to scroll up to view auxiliary parameters.

My question is: how can I make the "selected" option higher? that is, so that the entire selection block scrolls so that it appears at the top?

+4
source share
2 answers

Try the following:

$('select option:selected').before($('select option:first'));

If this is what you mean?

+1
source

What you can do is find the selected index, select the option next to it and reselect the selected item, and the item will appear at the top of the list. These are hacks, but it works. This also works for only one choice, you will need to re-select all the options, if there are several.

 var sel = ​document.getElementById("yourSelect"); var optsLen = sel.options.length; var selIndex = sel.selectedIndex; var size = sel.size; if (selIndex>=size) { var newIndex = selIndex+size+1; if (newIndex>optsLen) { newIndex = optsLen; } sel.selectedIndex = newIndex; setTimeout(function(){sel.selectedIndex = selIndex},1); //slight delay so line above runs }

Jsfiddle

+1
source

Source: https://habr.com/ru/post/1442724/

More articles:


All Articles