Giorgio Giorgio - 5 months ago 8
HTML Question

How can I keep the same position on my drop down menu once a user selects

I have a drop down field on my form. When I select a value from the drop down it immediately resets the focus to the top of the form.

To be clearer I have a drop down menu at the top of the screen and several input fields. The user would have to scroll down to the actual drop down field in order to select it. Once they select the value the page scrolls back to the top.

How can I keep the position the user selected on the form once a user selects a value from the drop down? [NOTE: It will not show up on stack overflow you would have to copy and paste the code and try it on your own browser]

My drop down is setup as:



// creates the page dynamically
function GetSelectedItem(){
var option = document.getElementById("locale").value;
}

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="languageswitcher.css">
<script>
window.onload{
document.getElementById("locale").options[value].selected;
}

</script>
</head>

<body>

<header>

<div id="country-select">
<form action="" method = "get">
<select id= "locale" name="locale">
<option value="en_US">English(US)</option>
<option value="en_GB">English(UK)</option>
<option value="bg_BG">Bulgarian</option>
<option value="cs_CS">Czech</option>
<option value="da_DK">Danish</option>
<option value="de_DE">German</option>
<option value="ek_GR">Greek</option>
<option value="es_ES">Spanish</option>
<option value="et_ET">Estonian</option>
<option value="fi_FI">Finnish</option>
<option value="fr_FR">French</option>
<option value="hu_HU">Hungarian</option>
<option value="it_IT">Italian</option>
<option value="lt_LT">Lithuanian</option>
<option value="lv_LV">Latvian</option>
<option value="nl_NL">Dutch</option>
<option value="no_NO">Norwegian</option>
<option value="pl_PL">Polish</option>
<option value="pt_PT">Portugese</option>
<option value="ro_RO">Romanian</option>
<option value="sk_SK">Slovak</option>
<option value="sl_SL">Slovenian</option>
<option value="sv_SE">Swedish</option>
</select>
<input value="Select" type="submit"/>
</form>
</div>
</header>
<script src="jquery_1.5.min.js"></script>
<script src="languageswitcher.js"></script>
</body>
</html>




Answer

The easiest way would be to run a script to jump down to that part of page when you run your window.onload function:

window.onload{
      document.getElementById("locale").options[value].selected;
      window.location.hash="country-select"; 
}

You would need to put some extra logic around it as you would only want to do it when a value had been selected but that is the basic code for jumping down the page.

Comments