javascript - how to perform setfocus(); to the dropdown list

I'm having a dropdown list which loads the records from DB on OnLoad() event, I want to set focus on the dropdown box when the page loads. I have tried many ways to set focus but its not working. pls look at the code below.

HTML CODE is as follows,

 <body onLoad="getDataSourceList()">
<div class="wrapper">   


    <form id="myUploadForm" name="myUploadForm">

    <table width="100%">
            <tr> <td align="right"><label for="dataSourceId" style=" font-family: serif; font-size: small;">DataSource Type<b style="color: red">*</b>: </label> </td> 
                 <td><select name="dataSourceType" id="dataSourceId">
                        <option value="Select"> Select</option>
                    </select>
                 </td> 
            </tr>

        </table>

    </form>

My ajax code goes below :

function getDataSourceList() {
    $.ajax({
        url : '/DataWeb/getAllDataSources',
        type : 'post',
        dataType : 'json',
        contentType : 'application/json',

        success : function(map) {
            console.log(map);
            var select = document.getElementById("dataSourceId");
            for (index in map) {
                select.options[select.options.length] = new Option(
                        map[index], index);
            }
        },

        error : function(map) {
            console.log(map);
            console.log("error occured!!!");
        },

    });
    document.getElementById('dataSourceId').focus();
}

Thanks in advance.

HTML CODE is as follows,

 <body onLoad="getDataSourceList()">
<div class="wrapper">   


    <form id="myUploadForm" name="myUploadForm">

    <table width="100%">
            <tr> <td align="right"><label for="dataSourceId" style=" font-family: serif; font-size: small;">DataSource Type<b style="color: red">*</b>: </label> </td> 
                 <td><select name="dataSourceType" id="dataSourceId">
                        <option value="Select"> Select</option>
                    </select>
                 </td> 
            </tr>

        </table>

    </form>

My ajax code goes below :

function getDataSourceList() {
    $.ajax({
        url : '/DataWeb/getAllDataSources',
        type : 'post',
        dataType : 'json',
        contentType : 'application/json',

        success : function(map) {
            console.log(map);
            var select = document.getElementById("dataSourceId");
            for (index in map) {
                select.options[select.options.length] = new Option(
                        map[index], index);
            }
        },

        error : function(map) {
            console.log(map);
            console.log("error occured!!!");
        },

    });
    document.getElementById('dataSourceId').focus();
}

Thanks in advance.

Share Improve this question edited Nov 5, 2012 at 6:58 asked Nov 5, 2012 at 6:15 madhu 1,0187 gold badges21 silver badges39 bronze badges

You might try to put document.getElementById('dataSourceId').focus(); statement to success callback, just after for loop. – Dfr Commented Nov 5, 2012 at 6:47
Your example seem working ok: jsfiddle/7phq8 I guess problem could be with javascript loading order or elsewhere. – Dfr Commented Nov 5, 2012 at 7:35

Add a ment |

2 Answers 2

Sorted by: Reset to default 2

$(document).ready(function(){
 $("#myid").focus();
});

This works for me...

Try adding a tab index to dataSourceId element. refer to Which HTML elements can receive focus? for details on the elements on which focus() applies.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - how to perform setfocus(); to the dropdown list - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)