javascript - 一旦用户在下拉菜单上选择它，如何在下拉菜单上保持相同的位置

Question

我的表单上有一个下拉字段。当我从下拉列表中选择一个值时，它会立即将焦点重置到表单顶部。

更清楚地说，我在屏幕顶部有一个下拉菜单和几个输入字段。用户必须向下滚动到实际的下拉字段才能选择它。一旦他们选择了值，页面就会滚动回顶部。

一旦用户从下拉列表中选择一个值，如何保留用户在表单上选择的位置？我几乎尝试了所有方法，只需要一些帮助即可完成此任务。

这是我的所有代码

JSFiddle

document.addEventListener("DOMContentLoaded", function(event) { 
  // creates the page dynamically
  function GetSelectedItem(){
    var option = document.getElementById("locale").value;
  }
  
  document.getElementById("locale").addEventListener('change', function(event) {
    var selected = event.target.options[ event.target.selectedIndex ].value 
    console.log(selected);
    window.location.hash = selected; 
  });
});

<div id="country-select">
  <form action="" method="get">
    <select id="locale" name="locale">
      <option value="en_US" title='0'>English(US)</option>
      <option value="en_GB" title='1'>English(UK)</option>
      <option value="bg_BG" title='2'>Bulgarian</option>
      <option value="cs_CS" title='3'>Czech</option>
      <option value="da_DK" title='4'>Danish</option>
      <option value="de_DE" title='5'>German</option>
      <option value="ek_GR" title='6'>Greek</option>
      <option value="es_ES" title='7'>Spanish</option>
      <option value="et_ET" title='8'>Estonian</option>
      <option value="fi_FI" title='9'>Finnish</option>
      <option value="fr_FR" title='10'>French</option>
      <option value="hu_HU" title='11'>Hungarian</option>
      <option value="it_IT" title='12'>Italian</option>
      <option value="lt_LT" title='13'>Lithuanian</option>
      <option value="lv_LV" title='14'>Latvian</option>
      <option value="nl_NL" title='15'>Dutch</option>
      <option value="no_NO" title='16'>Norwegian</option>
      <option value="pl_PL" title='17'>Polish</option>
      <option value="pt_PT" title='18'>Portugese</option>
      <option value="ro_RO" title='19'>Romanian</option>
      <option value="sk_SK" title='20'>Slovak</option>
      <option value="sl_SL" title='21'>Slovenian</option>
      <option value="sv_SE" title='22'>Swedish</option>
    </select>
    <input value="Select" type="submit"/>
  </form>
</div>

我知道这与我的代码的 javascript 部分有关。

Answer 1

我认为这应该对你有用，我只是将注意力转移到改变上。

参见 fiddle https://jsfiddle.net/jjswhccd/1/

$("select#locale").change(function() {
  $("#locale").blur();
});