执行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. currencyListFrom你的 javascript 总是设置 sessionStorage 中和元素的值currencyListTo，即使那里什么也没有。这实际上是将值设置为未定义。

解决这些问题似乎可以解决问题：

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