Question

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

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

一旦用户从下拉列表中选择一个值，我如何保持用户在表单上选择的位置？我已经尝试了几乎所有的东西，我只是需要一些帮助来完成这个。

这是我的所有代码

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

我认为这应该适合你，我只是把注意力放在改变上。

请参阅小提琴https://jsfiddle.net/jjswhccd/1/

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

一旦用户在下拉菜单中选择该位置，如何在我的下拉菜单中保持相同的位置

1 个答案: