Giorgio Giorgio - 5 months ago 23
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;
}
//THIS WON'T WORK?
function StayOnSelectedItem(){
var element = document.getElementById("locale");
var value = element.options[element.selectedIndex].value;
}

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Website toolbar</title>
<link rel="stylesheet" href="languageswitcher.css">
</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="languageswitcher.js"></script>

</body>
</html>




Answer

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;
console.log(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.