How to set the focus on the first <select> element of the page using JQuery?

Question

I would like to set the focus on the first element of the page using JQuery when the page is loaded. I could successfully set the focus for first element by using

$(":input:visible:first").focus(); 

or

$(':input:enabled:visible:first').focus();

according to jquery, set focus on the first enabled input or select or textarea on the page.

I tried to use any of the below:

$('select:first').focus();
$("select").first().focus();
$(':visible:first').focus();
$('enabled:visible:first').focus();

or other variations I could think of, but have not succeeded.

Could anyone help me on this problem? I am a beginner to JQuery.

I would like this function to work for all major browsers.

Thank you very much!

Answer 1

The problem is most likely to be that you are not running the code on after the DOM is loaded. Try this one:

$(document).ready(function(){
   $("select:first").focus();
});

That should work.

EDIT: You can simplify the code a bit by using this:

$(function(){
  $("select:first").focus();
})

If you use it that way, jQuery will trigger that function when the document's DOM is ready.

Answer 2

You are calling on element that is not loaded in DOM. Place your code in ready function.

jQuery(document).ready(function() {
    $(":input:visible:first").focus();               
});

UPDATE:

As seen in @David answer and comments, he is right.

$(document).ready(function(){
    $("select:first").focus();
});

but you have not correctly included jquery (as seen in comment). you have missed to insert http before script src.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>