jQuery将重点放在选择列表的所选项目上

Question

I have a select list that is size="10" - so it always shows 10 of the 100 options available.

When the page loads, the 1st 10 options are always displayed, even if option value 50 is selected .

I have read that adding focus to the selected item of the select list will work so that when the page loads option 50 will be displayed in the select list, instead of the 1st 10 options.

However, after reading many threads and searching google, I am unable to work out how to set the focus to the selected item.

I am wanting to set both the selected and the focus applied to the item of the select list.

Here is what I have tried and does not work:

$('#id_preview_style_select option:selected').prop('selected', true);  //set the selected value.

$('#id_preview_style_select option:selected').prop('focus', true);  //does not work.
$('#id_preview_style_select option:selected').focus();  //does not work

This is what I am seeking to achieve:

<select id="id_preview_style_select" size="10" autofocus>
  <option value="0">Style 0</option>
  <option value="1">Style 1</option>
  <option value="2">Style 2</option>
  <option value="3">Style 3</option>
  ....
  <option value="50" selected focus>Style 50</option>
  ....
  <option value="99">Style 99</option>
  <option value="100">Style 100</option>
</select>

Any assistance would be appreciated.

Answer 1

.prop('focus', true); would never work since focus() is a method, not a property (need to be invoked).

Try $('#id_preview_style_select option:selected').focus();

If it doesn't work right away you might need to timeout it with a timeout of 0 milliseconds. Hopefully that will help.

Edit: if none of this works (it might be that browsers would not allow this) I'd just scroll the list of options, so user can see what is selected.