在表单提交时保留动态提交的选择选项答案

【问题标题】：Retain dynamically submitted select options on form submit在表单提交时保留动态提交的选择选项
【发布时间】：2018-07-29 05:02:19
【问题描述】：

我有一个带有动态填充选择的 html 表单：

    <form action="/" method="post" onsubmit="beforeSubmit()" id="crypto_form">
        <textarea name="message" id="textarea_message" oninput="this.value.toUpperCase()" cols="60" rows="5" placeholder="Enter Message"></textarea>
        <select form="crypto_form" name="keydata" id="select_keydata"></select>
        <button type="submit" name="type" id="btn_encrypt" value="encrypt">Encrypt</button>
        <button type="submit" name="type" id="btn_decrypt" value="decrypt">Decrypt</button>
    </form>

问题是当我提交表单时，所有选择值都消失了。提交表单时如何保留它们？我查看了与此类似的问题，但没有一个能解决我的特殊情况。

我认为正在发生的事情是页面正在重新加载，这就是选项消失的原因。

我使用 golang 作为net/http 的后端。虽然，我认为它在这里没有太多链接，但如果它有助于解决问题，请告诉我。

注意：beforeSubmit() 函数为空。我可以在其中添加任何内容以保留选项吗？

【问题讨论】：

很难用你提供的信息来回答。提交后整个页面是否刷新？何时选择值消失？在提交之后还是之前？
@f-CJ 是的。我会相信的。我不认为这些选项会消失。
好吧，如果网站正在刷新...您可以使用 localstorage 存储选项并在刷新后使用它们，或者您可以将动态创建的选项存储在后端并在页面加载时请求。
@f-CJ 是的，经过多一点挖掘后找到了！正要发布答案。不过谢谢！你想尽孝吗？

标签： javascript html forms select form-submit

【解决方案1】：

好吧，如果网站正在刷新，您可以使用localStorage 或sessionStorage 将您的数据保存在浏览器中。

推荐使用 ES6 Maps 来存储<option> 值。然后可以将地图转换为 JSON 字符串并存储在您的 localStorage/sessionStorage 中。

这是一个 sn-p 将 <option> 文本和值添加到地图：

map.set(option.text, option.value)

所以你的beforeSubmit() 函数看起来像这样：

function beforeSubmit() {
    sessionStorage.myMap = JSON.stringify(Array.from(map));
};

当你想检索数据时，比如window.onload，你可以这样做：

var map;

window.onload = function() {
    if (sessionStorage.myMap != null) {
        map = new Map(JSON.parse(sessionStorage.myMap));
    } else {
        map = new Map();
    }
};

【讨论】：

【解决方案2】：

您应该替换此代码：

type="submit"

到 type="button"

 <button type="button" name="type" id="btn_encrypt" value="encrypt">Encrypt</button>
 <button type="button" name="type" id="btn_decrypt" value="decrypt">Decrypt</button>

【讨论】：

然后通过javascript提交表单？