Question

所以目前我有一个下拉菜单，其中填充了一个json文件，每个选项看起来都是这样（实际文件中还有更多的集合）：

JSON

{
  "thing": {
    "Selected thing": [
      {
        "name"   : "thing 1",
        "value"  : 1.0,
        "purpose": "thing 1"
      }, 
    ]           
  }
}

使用脚本将它们填充到下面的HTML选择中：

HTML

<tr>
  <td><strong>Choose a Thing</strong></td>
  <td>
    <div>
      <select name="thing" class="form-control" id="thing" value="{{ thing  }}">
        <option class ="placeholder">{{ thing }}</option>
      </select>
    </div>
  </td>
</tr>

JavaScript

$(document).ready(function () {
  var menu = document.getElementById('thing')
  $.getJSON("{{ url_for('static', filename='things.json') }}", function (data) {
    $.each(data.things, function (optgroup, options) {
      var next_optgroup = document.createElement('OPTGROUP')
      next_optgroup.setAttribute("label", optgroup)
      menu.appendChild(next_optgroup)
      $.each(options, function (index) {
        next_option = document.createElement('OPTION')
        next_option.setAttribute("value", options[index].value)
        next_option.setAttribute("name", options[index].name)
        next_option.innerHTML = options[index].name
        next_optgroup.appendChild(next_option)
      });
    });
  });
})

目前，选择所选选项并按下提交按钮后，值（1）将传递给Flask，并通过{{thing}}存储并呈现为选择选项值。

我需要它可以像它一样运行，但我还需要能够存储与所选选项相关联的名称，我觉得我可能需要使用javascript或一些隐藏的输入（肯定会在我的身上添加另一个输入HTML表单），尽管我对javascript的了解很少。

换句话说，我如何能够存储和刷新页面，保持HTML页面上显示所选的选项名称（事物1）？

Answer 1

链接中描述的本地存储（https://www.w3schools.com/html/html5_webstorage.asp）可用于在本地计算机上的用户浏览器中存储数据。这意味着如果他们从另一台计算机访问该页面，他们将无法访问该存储的数据。如果您需要保留此信息并从不同的计算机/浏览器访问它，则必须在实时Web服务器上实现数据库，并在用户访问该页面时请求此信息。

本地存储使用简单。以下是如何为用户选择的事物设置变量的示例：

// Using jQuery
$('#thing').on('change', function() {
// Save the Value in local storage
localStorage.setItem('userThing', $('#thing').val());

});

在页面准备就绪后从存储中加载值并且您已构建并填充了“thing”选择表单元素：

// Get the 'userThing' from local storage and set the select element with id 'thing'
$('#thing').val(localStorage.getItem('userThing');

这些任务在Javascript开发人员中很常见。像Google的AngularJS和Facebook的React这样的框架是为了简化这些任务而构建的（也就是说，在你学会了这个框架之后它们很简单......这需要一点时间才能让人感到舒服，但是如果打算用javascript构建大型项目。他们严重依赖MVC范例，强烈建议在开发Web应用程序时使用。

保存/存储来自optgroup

1 个答案: