Giorgio Giorgio - 1 year ago 69
HTML Question

Stay on selected item on drop down menu using Javascript

What is happening is I'm trying to get the drop-down menu to STAY on what was selected but it keeps switching to the default after I hit submit. Can someone help me with the javascript code because I know for sure that's the issue? Thanks everyone I'm trying to self-learn this.

function GetSelectedItem(){
var option = document.getElementById("locale").value;
function StayOnSelectedItem(){
var element = document.getElementById("locale");
var value = element.options[element.selectedIndex].value;

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>My Website toolbar</title>
<link rel="stylesheet" href="languageswitcher.css">



<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>
<input value="Select" type="submit" />
<script src="languageswitcher.js"></script>


Answer Source

Your title

Get selected text from a drop-down list (select box) using Javascript

is not the same question as your first sentence:

What is happening is I'm trying to get the drop-down menu to STAY on what was selected but it keeps switching to the default after I hit submit.

To get the text from the selected option in a drop-down list, you use

var e = document.getElementById('locale');
var text = e.options[e.selectedIndex].text;

To get a form to keep its values after clicking a button of the type submit, it should work this way by default. From what I know, browsers don't have a reason to want to clear a drop-down field when clicking a button of the type submit.

You can always test stopping the browser's default behavior by including return false; in the onsubmit event.

<input value="Select" type="submit" onsubmit="GetSelectedItem(); return false;" />

Edit: And from your comment replies, it seems your actual question is something else entirely. If you want to retain the value of a drop-down list AFTER having left the page, you will need to store the value somewhere (most commonly a cookie, SessionStorage or a server-side session which is outside of the scope of Javascript).

I recommend this MDN article if you want to use SessionStorage.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download