jQuery - 使用表单数据保存下拉列表的内容（不仅仅是选择的选项）

Question

我要做的是保存/恢复复杂订单的状态。 我的表单是数据驱动的，有多个下拉列表（选择），其内容会根据各种标准（包括在以前的下拉列表选择中做出的选择）而变化。

虽然我可以找到许多关于捕获和恢复表单数据的示例（和插件） - 在这种情况下它们都失败了，因为它们只存储下拉选择列表的当前选择，而不是它们的内容。

• 保存下拉选择的当前选定选项不能满足我的需要，因为之前的选择可能不存在于正在恢复的当前选择列表中。

• 保存/替换 HTML 内容在视觉上有效，但会使表单失效且无响应。 IE。表单看起来恢复已成功，但由于我的验证功能失败，无法更新或提交表单。

非常感谢您提供有效插件的指导、代码或参考。
如果重要的话，我目前正在使用 jQuery v1.9.1

谢谢...

编辑：
我可以编写一个备份函数，在其中通过 id 获取每个选择，获取数据并存储它，然后创建一个还原函数来反转该过程，但我真的希望找到一些更优雅且不太可能中断的东西我必须修改订单。 也许沿着序列化表单数据但保存和恢复整个选择下拉列表对象的方式，而不仅仅是它的选定值。

Answer 1

如果您想避免 AJAX，您可以使用 JavaScript 从您用 JSON 或其他标记表达的数据中实例化您的表单：

form = [
    {
       "question":"Is it the weekend?",
       "choices":["Yes","No"]
    },
    {
       "question":"What will you do today?",
       "options":[
             ["Go to the park","Go to the beach"]
             ["Go to school","Go to work"],
       ]
    }
]

Then you could save the appropriate set of choices for each question in persistent storage:

localStorage["question2"] = 2;

在这种情况下，我们已经存储了用户在第一个问题中选择了“否”，因此我们希望在下次实例化表单时为问题 2 设置第二个选项：

 var options = form[2].options[localStorage["question2"]]
 for (var i=0;i<options.length;i++) {
   $('#select2').append(
      $('<option></option>').val(i).text(options[i]);
   );
 }