0
278
ViewsHow to make movement of select options circular?
Consider the following select element. Try to move navigate through the options using arrow keys. You see when you reach the bottom you can't move to top if you press down once more. And same for the top.
<select>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>I want to have this feature with select. But the issue is that I am unable to find out anyway get the option which is temporarily selected while navigating.
One thing I found out is to change the selectedIndex of the element but this also doesn't work because it doesn't change the current hovered/active option of select rather it changes actual value of select.
I have a restriction that I have to use only simple select element of html.
I will be thankful if you are able to help me out.
1 answers
Answer question0
let $1 = document.querySelector('#s1')
let $2 = document.querySelector('#s2')
console.log('S1 VALUE:', $1.value, '\nS2 VALUE:', $2.value)<!-- DEFAULT -->
<select id="s1">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select><br>
<!-- PRE-SELECTED -->
<select id="s2">
<option value="A">A</option>
<option value="B">B</option>
<option selected value="C">C</option>
<option value="D">D</option>
</select>There is a screenshot of my result:
If that solution doesn't work, you can try this:
console.log(document.querySelector('select').selectedOptions[0].value)<select>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>In that snippet I used: selectedOptions, in options array I choose first object because in <select> element we can choose only single option, so then I get itself value.