Пустой выпадающий список возвращается после выполнения 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>

Я кодировал таким образом, чтобы JavaScript запомнил выбранный выпадающий список, если я выберу соответствующие валюты и отправлю форму, то выбранные значения не исчезнут, что нормально, но когда страница загружается для в первый раз я не вижу свои параметры по умолчанию, они пустые, есть ли способ решить проблему, спасибо

Изображение

Answer 1

Обратите внимание на пару вещей:

1. У вас есть selected опора для всех ваших опций
2. Ваш javascript всегда устанавливает значение currencyListFrom и currencyListTo элементов из sessionStorage, даже если там ничего нет. Это фактически устанавливает значение неопределенным.

Решение этих проблем, кажется, решает проблему:

<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>