HTML anchor and JS focus not working together
I have a form in which there are 2 dropdowns for Country and State respectively (in the middle of the form). When I select a value from the Country dropdown the page refreshes and loads the State dropdown with the relevant state names. I want the page to remain in the same place where it was before refreshing the page (ie., I dont want the page to go to the top after refreshing) and also I want the focus to be on the State dropdown after refershing. For this I created a HTML anchor as below
<a name="cntrystateanchor" />
<option value="" selected >- Please Select -</option>
<% Iterator keys= countrylist.keySet().iterator();
........... <% } %>
When the page is done with refreshing I am doing the following
document.location = "#cntrystateanchor";
My page is staying at the same place after refreshing but the focus is not getting set to the 'States' dropdown. If I remove the "document.location = "#cntrystateanchor";" the focus is getting set correctly to the 'States' dropdown but as expected the page is going to the top after refreshing (as I removed the document.location).
Can someone please help me with this.