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

有几点需要注意：你selected对所有的选择都有支持currencyListFrom你的 javascript 总是设置 sessionStorage 中和元素的值currencyListTo，即使那里什么也没有。这实际上是将值设置为未定义。解决这些问题似乎可以解决问题：<label for="currencyListFrom">From:</label><select&nbsp; &nbsp; id="currencyListFrom"&nbsp; &nbsp; onchange="callCurrFrom(this)"&nbsp; &nbsp; name="cf"&nbsp; &nbsp; form="currencyform">&nbsp; &nbsp; <option value="none" disabled hidden>Select Currency From</option>&nbsp; &nbsp; <option value="EUR" label="EURO">EUR</option></select><label for="currencyListTo">To:</label><select&nbsp; &nbsp; id="currencyListTo"&nbsp; &nbsp; onchange="callCurrTo(this)"&nbsp; &nbsp; name="ct"&nbsp; &nbsp; form="currencyform">&nbsp; &nbsp; <option value="none" disabled hidden>Select Currency To </option>&nbsp; &nbsp; <option value="USD" label="US dollar">USD</option></select><script>&nbsp; &nbsp; // wrap in IIFE in order to not pollute global scope&nbsp; &nbsp; (function() {&nbsp; &nbsp; &nbsp; &nbsp; //sessionStorage stores the data for one session until web browser is open&nbsp; &nbsp; &nbsp; &nbsp; function callCurrFrom(obj) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //setItem() accept key, keyvalue pair&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sessionStorage.setItem(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "selectedCur",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; obj.options[obj.selectedIndex].value&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // id value stored&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("currencyListFrom").value =&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; obj.options[obj.selectedIndex].value;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; var defaultFrom = sessionStorage.getItem(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "selectedCur"&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; if (defaultFrom) { // ensure it's not falsey&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("currencyListFrom").value = defaultFrom&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; function callCurrTo(obj) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sessionStorage.setItem(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "selectedCurr",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; obj.options[obj.selectedIndex].value&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("currencyListTo").value =&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; obj.options[obj.selectedIndex].value;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; var defaultTo =sessionStorage.getItem(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "selectedCurr"&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; if (defaultTo) { // ensure it's not falsey&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("currencyListTo").value = defaultTo&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; })();</script>