HTML如何根据选定的下拉值保存输入答案

【问题标题】：HTML how to save input depending on selected dropdown valueHTML如何根据选定的下拉值保存输入
【发布时间】：2020-10-17 01:00:09
【问题描述】：

HTML：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <form action="" method="post">
      <label>Select Fridge or Freezer</label>
      <select name="FridgeFreezer">
        <option value="Fridge 1">Fridge 1</option>
        <option value="Fridge 2">Fridge 2</option>
        <option value="Fridge 3">Fridge 3</option>

      </select>

      <label>Temperature °C</label>
      <input type="number">
      <label>Comments</label>
      <textarea name="comments"></textarea>
      <button type="button" name="button">Save</button>

    </form>
  </body>
</html>

目标：

如何从下拉菜单中选择一个值，例如，我从菜单中选择了Fridge 1，然后在Temperature °C 和Comments 框中键入一些值。接下来从下拉框中选择另一个值作为示例Fridge 2 并开始新的输入，但如果我回到Fridge 1 之前输入的数据可见。

在研究方面我需要研究什么？我不知道去哪里看或搜索什么关键字。

【问题讨论】：

我认为你需要 JavaScript！
你想用 javascript 还是 jQuery 来做这个？
当您说“保存”时，您是否考虑为该会话保存它？还是将其保存到该浏览器以供将来使用？还是保存到服务器？等等等等
@AlwaysHelping JavaScript 最好
在这种情况下，我会为 select 元素监听 change 事件，然后将其他字段的值存储在代表每个选项的对象数组中（ {id: 'Fridge 1', temp: '2', comments: 'example'}) 之类的东西，然后在数组中搜索您应该为新 id 加载的任何值。

标签： html select input drop-down-menu

【解决方案1】：

我强烈建议为此使用 Vue.js。状态管理在其中非常容易。我这样做的方法是：

    var app = new Vue({
        el: '#app',
        data: function(){
            return {
            devices: [{id: 0, name: 'fridge1', tempCelcius: 39, price: 20}, 
            {id: 1, name: 'fridge1', tempCelcius: 39, price: 30}, 
            {id: 2, name: 'fridge1', tempCelcius: 39, price: 40}],
            selected = ''
            }
            }
            
        
        })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div id="app">
        <select v-model="selected">
            <option disabled value="">Please select one</option>
            <option v-for="device in devices" v-bind:key="device.id">{{ device.name }}</option>
        </select>
        <span>{{ selected }}</span>
    </div>
</body>
</html>

这是一个开始，它还没有完全奏效，但here 是您可以找到如何实施的地方

【讨论】：

【解决方案2】：

我已经整理了一个我在 cmets 中提到的快速示例，使用一个简单的对象数组来维护每个选项之前的状态。

When the select is changed, we:

检查我们是否有前一个 id 的对象
如果我们这样做，请更新该对象，否则，使用新值创建一个新对象
更新当前 id（我们将其存储在外部，因为在执行 change 时它已丢失）
检查新加载的 id 的任何已保存数据，如果存在则加载

var savedValues = []
var currentId = document.getElementById("fridgeFreezer").value

function handleChange() {
  // The new values for the fridge with id currentId:
  var temp = document.getElementById("temperature").value
  var comments = document.getElementById("comments").value
  
  // Save these values for the previous id
  // - First, check to see if we already have a record we can update
  var save = savedValues.find(save => {
    return save.id === currentId
  })
  // - If we do, update it, otherwise create a new record
  if (save) {
    save.temp = temp
    save.comments = comments
  } else {
    savedValues.push({
      id: currentId,
      temp: temp,
      comments: comments,
    })
  }
  
  // Update the current id to the newly selected option
  currentId = document.getElementById("fridgeFreezer").value
  
  // Load any previously saved data for this new id
  save = savedValues.find(save => {
    return save.id === currentId
  })
  // If we find a previous value, load it, otherwise empty the inputs
  if (save) {
    document.getElementById("temperature").value = save.temp
    document.getElementById("comments").value = save.comments
  } else {
    document.getElementById("temperature").value = ''
    document.getElementById("comments").value = ''
  }
  
}

// Attach the event listener to the document
document.getElementById("fridgeFreezer").addEventListener('change', handleChange, false)

label {
  display: block
}

<form action="" method="post">
  <label>Select Fridge or Freezer</label>
  <select name="FridgeFreezer" id="fridgeFreezer">
    <option value="Fridge 1">Fridge 1</option>
    <option value="Fridge 2">Fridge 2</option>
    <option value="Fridge 3">Fridge 3</option>
  </select>

  <label>Temperature °C</label>
  <input type="number" id="temperature">
  <label>Comments</label>
  <textarea name="comments" id="comments"></textarea>
  <button type="button" name="button">Save</button>

</form>

【讨论】：

你能解释/扩展save = savedValues.find... 不知道发生了什么
@LV98 find 方法采用一个函数，该函数用于过滤数组中的每个元素并返回该函数返回 true 的第一项。我使用了arrow function:save => { return save.id === currentId }，这意味着数组中的每个元素都被传递给函数（这就是save 在这种情况下的含义），一次一个，并且一直持续到其中一个数组中的元素有一个id 属性，匹配currentId 并返回true，否则到达末尾。
find 的文档（该链接不符合第一条评论的字符数限制）