2016-06-22 9 views
1

auswählt? Ich habe ein Dropdown-Feld auf meinem Formular. Wenn ich einen Wert aus dem Drop-down-Menü auswähle, wird der Fokus sofort auf den Anfang des Formulars zurückgesetzt.Wie kann ich dieselbe Position in meinem Dropdown-Menü beibehalten, wenn ein Benutzer

Um klarer zu sein Ich habe ein Dropdown-Menü am oberen Rand des Bildschirms und mehrere Eingabefelder. Der Benutzer müsste zu dem tatsächlichen Dropdown-Feld blättern, um es auszuwählen. Sobald sie den Wert ausgewählt haben, scrollt die Seite wieder nach oben.

Wie kann ich die Position beibehalten, die der Benutzer auf dem Formular ausgewählt hat, nachdem ein Benutzer einen Wert aus dem Dropdown ausgewählt hat? [HINWEIS: Es wird nicht angezeigt auf Stack-Überlauf würden Sie kopieren müssen und fügen Sie den Code und versuchen Sie es auf Ihrem eigenen Browser]

Mein Dropdown-Setup ist wie:

// creates the page dynamically 
 
\t function GetSelectedItem(){ 
 
\t \t var option = document.getElementById("locale").value; 
 
\t }
<!doctype html> 
 
<html lang="en"> 
 
    <head> 
 
\t  <meta charset="utf-8"> 
 
\t  <title></title> 
 
\t  <link rel="stylesheet" href="languageswitcher.css"> 
 
\t \t <script> 
 
\t \t window.onload{ 
 
\t \t document.getElementById("locale").options[value].selected; 
 
\t \t } 
 
\t \t 
 
\t \t </script> 
 
    </head> 
 
    
 
    <body> 
 
    
 
    <header> 
 
    
 
     <div id="country-select"> 
 
     <form action="" method = "get"> 
 
      <select id= "locale" name="locale"> 
 
\t \t \t <option value="en_US">English(US)</option> 
 
\t \t \t <option value="en_GB">English(UK)</option> 
 
\t     <option value="bg_BG">Bulgarian</option> 
 
\t     <option value="cs_CS">Czech</option> 
 
\t     <option value="da_DK">Danish</option> 
 
\t \t \t <option value="de_DE">German</option> 
 
\t \t \t <option value="ek_GR">Greek</option> 
 
\t \t \t <option value="es_ES">Spanish</option> 
 
\t  \t   <option value="et_ET">Estonian</option> 
 
\t \t \t <option value="fi_FI">Finnish</option> 
 
\t \t \t <option value="fr_FR">French</option> 
 
\t \t \t <option value="hu_HU">Hungarian</option> 
 
\t \t \t <option value="it_IT">Italian</option> 
 
\t \t \t <option value="lt_LT">Lithuanian</option> 
 
\t \t \t <option value="lv_LV">Latvian</option> 
 
\t \t \t <option value="nl_NL">Dutch</option> 
 
\t \t \t <option value="no_NO">Norwegian</option> 
 
\t \t \t <option value="pl_PL">Polish</option> 
 
\t \t \t <option value="pt_PT">Portugese</option> 
 
\t \t \t <option value="ro_RO">Romanian</option> 
 
\t \t \t <option value="sk_SK">Slovak</option> 
 
\t \t \t <option value="sl_SL">Slovenian</option> 
 
\t \t \t <option value="sv_SE">Swedish</option> 
 
      </select> 
 
      <input value="Select" type="submit"/> 
 
     </form> 
 
     </div> 
 
    </header> 
 
\t <script src="jquery_1.5.min.js"></script> 
 
    <script src="languageswitcher.js"></script> 
 
</body> 
 
</html>

Antwort

0

auf den Teil der Seite der einfachste Weg, um ein Skript zu laufen hinunter zu springen, wäre, wenn Sie Ihre window.onload Funktion ausführen:

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

Sie müssten etwas zusätzliche Logik einbauen, da Sie dies nur tun möchten, wenn ein Wert ausgewählt wurde, aber das ist der Basiscode für das Herabspringen der Seite.

+0

Danke! @Leo Bauer – Giorgio