Blank dropdown list returned after executing Javascript

Question

<label for="currencyListFrom">From:</label>
<select
    id="currencyListFrom"
    onchange="callCurrFrom(this)"
    name="cf"
    form="currencyform"
>
    <option value="none" selected disabled hidden>Select Currency From</option>
    <option value="EUR" label="EURO" selected>EUR</option></select
>

<label for="currencyListTo">To:</label>
<select
    id="currencyListTo"
    onchange="callCurrTo(this)"
    name="ct"
    form="currencyform"
>
    <option value="none" selected disabled hidden>Select Currency To </option>
    <option value="USD" label="US dollar" selected>USD</option>
</select>

<script>
    //sessionStorage stores the data for one session until web browser is open
    function callCurrFrom(obj) {
        //setItem() accept key, keyvalue pair
        sessionStorage.setItem(
            "selectedCur",
            obj.options[obj.selectedIndex].value
        );
        // id value stored
        document.getElementById("currencyListFrom").value =
            obj.options[obj.selectedIndex].value;
    }
    // Retrieve Value
    document.getElementById("currencyListFrom").value = sessionStorage.getItem(
        "selectedCur"
    );
    function callCurrTo(obj) {
        sessionStorage.setItem(
            "selectedCurr",
            obj.options[obj.selectedIndex].value
        );
        document.getElementById("currencyListTo").value =
            obj.options[obj.selectedIndex].value;
    }
    document.getElementById("currencyListTo").value = sessionStorage.getItem(
        "selectedCurr"
    );
</script>

I coded this way so that the JavaScript will remember the selected drop down, if I select the respective currencies and submit the form then selected values don't disappear which is fine but when the page loads for the first time , I am not able to see my default options, They are blank , is there any way to solve the problem, Thanks

Image

Answer 1

A couple of things to note:

1. You have selected prop on all of your options
2. Your javascript is always setting the value of the currencyListFrom and currencyListTo elements from sessionStorage, even if there is nothing there. This is effectively setting the value to undefined.

Addressing those issues seems to solve the problem:

<label for="currencyListFrom">From:</label>
<select
	id="currencyListFrom"
	onchange="callCurrFrom(this)"
	name="cf"
	form="currencyform"
>
	<option value="none" disabled hidden>Select Currency From</option>
	<option value="EUR" label="EURO">EUR</option></select
>

<label for="currencyListTo">To:</label>
<select
	id="currencyListTo"
	onchange="callCurrTo(this)"
	name="ct"
	form="currencyform"
>
	<option value="none" disabled hidden>Select Currency To </option>
	<option value="USD" label="US dollar">USD</option>
</select>

<script>
    // wrap in IIFE in order to not pollute global scope
    (function() {
        //sessionStorage stores the data for one session until web browser is open
        function callCurrFrom(obj) {
            //setItem() accept key, keyvalue pair
            sessionStorage.setItem(
                "selectedCur",
                obj.options[obj.selectedIndex].value
            );
            // id value stored
            document.getElementById("currencyListFrom").value =
                obj.options[obj.selectedIndex].value;
        }
        var defaultFrom = sessionStorage.getItem(
            "selectedCur"
        );
        if (defaultFrom) { // ensure it's not falsey
            document.getElementById("currencyListFrom").value = defaultFrom
        }
    
        function callCurrTo(obj) {
            sessionStorage.setItem(
                "selectedCurr",
                obj.options[obj.selectedIndex].value
            );
            document.getElementById("currencyListTo").value =
                obj.options[obj.selectedIndex].value;
        }
        var defaultTo =sessionStorage.getItem(
            "selectedCurr"
        );
        if (defaultTo) { // ensure it's not falsey
            document.getElementById("currencyListTo").value = defaultTo
        }
    })();
</script>