HTML 如何根据所选的下拉值保存输入

Question

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>

目标：

如何从下拉菜单中 select 一个值，例如，我从菜单中 select 编辑了 Fridge 1，然后我在 [=13] 中输入了一些值=] 和 Comments 框。接下来 select 下拉框中的另一个值作为示例 Fridge 2 并开始新的输入，但是如果我返回 Fridge 1 之前输入的数据是可见的。

在研究方面我需要研究什么？我不确定在哪里查看或搜索什么关键字。

Answer 1

我已经将我在评论中提到的内容放在一起，使用一个简单的对象数组来维护每个选项之前的状态。

当select改变时，我们：

检查我们是否有前一个 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>

Answer 2

我强烈建议为此使用 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 是您可以找到实施方法的地方

HTML 如何根据所选的下拉值保存输入

HTML how to save input depending on selected dropdown value

html

select

input

drop-down-menu