如何将选项从 HTML 推送到 JS 中的对象数组？答案

【问题标题】：How to push a option from HTML to an array of an object in JS?如何将选项从 HTML 推送到 JS 中的对象数组？
【发布时间】：2019-08-08 12:14:29
【问题描述】：

我有服务员对象，每个对象都有自己的数组。

我在 JS 中填充了所有选项

在 HTML 中，两个选择元素填充有： i) 服务员对象 ii) foodItem 对象

我有一个按钮，在提交时我想将 foodItem 推送到选定的服务员数组。

我可以手动将 foodSelection 推送到 waiterSelection

waiters[0].order.push('Penne Primvera');

但我不确定这如何与表单一起使用。

<HTML>
        <form id="mainForm">
            <select id="menuMain" name="foodOrder"><option>Mains</option></select>
            <select id="waiters" name="waiterSelection"><option>Waiters</option></select>
            <input type="submit" value="Submit">         
        </form>

<JS>
//////////

//Waiter Objects

///////////

//Waiter constructor
function Waiter (name, order) {
    this.name = name;
    this.order = [];
}

//Waiter objects
var waiterOne = new Waiter('Timo');
var waiterTwo = new Waiter('Lucian');
var waiterThree = new Waiter('Arpi');




//Array to store waiters
var waiters = [
    waiterOne,
    waiterTwo,
    waiterThree
];


var waiter = document.getElementById('waiters');
var count = waiters.length;

//Adds the number of waiters to the options menu in the HTML file
for(var i = 0; i< count; i++){
    var waiterSelection = waiters[i];
    var selectedWaiter = waiterSelection.name;
    waiter.options.add(new Option(selectedWaiter));   
};




//////////////

//Food Items

////////////

//Food Constructor 
function Item (item, price) {
    this.item = item;
    this.price = price;
}

//Food objects
var iOne = new Item('Peene Primviera', 14.60);
var iTwo = new Item('Lasagne', 14.50);
var iThree = new Item('Fillet Steak', 20.00);

//Array for foodSlection
var maindItemList = [
    iOne,
    iTwo,
    iThree
];

//Add the Options to the DropDownList Mains.
var foodSelection = document.getElementById('menuMain')
var count = maindItemList.length;
for (var i = 0; i < count; i++) {
    var itemSelection = maindItemList[i];
    var value = itemSelection.item   + " (" + itemSelection.price +")"
    foodSelection.options.add(new Option(value));
};

////////////

//Form Submit

///////////

var form = document.getElementById('mainForm');
form.onSubmit = function (e) {
    console.log(form.foodSelection.value)
};

结果应该是当表单提交时，被选中的服务员应该将选中的食物推送到他们的订单数组中。

Waiter {name: "Timo", order: Array(1)}
name: "Timo"
order: ["Penne Primvera"]
__proto__: Object

【问题讨论】：

标签： javascript html

【解决方案1】：

给你！我也做了一些小改进。

更喜欢const 而不是let
保持简单
在适用时使用Array 方法
使用对象解构

//Waiter constructor
function Waiter(name, order) {
  this.name = name;
  this.order = [];
}

//Array to store waiters
const waiters = [new Waiter("Timo"), new Waiter("Lucian"), new Waiter("Arpi")];

const waiterEl = document.getElementById("waiters");

//Adds the number of waiters to the options menu in the HTML file
waiters.forEach(({ name }) => waiterEl.options.add(new Option(name)));

//Food Constructor
function Item(item, price) {
  this.item = item;
  this.price = price;
  this.label = `${item} (${price})`;
}

//Array for foodSlection
const foods = [
  new Item("Peene Primviera", 14.6),
  new Item("Lasagne", 14.5),
  new Item("Fillet Steak", 20.0)
];

//Add the Options to the DropDownList Mains.
const foodEl = document.getElementById("menuMain");

foods.forEach(({ label, item }) => foodEl.options.add(new Option(label, item)));

const formEl = document.getElementById("mainForm");

formEl.onsubmit = function(e) {
  const foodItem = foodEl.options[foodEl.selectedIndex].value;
  const waiterName = waiterEl.options[waiterEl.selectedIndex].value;
  const waiter = waiters.find(({ name }) => name === waiterName);

  if (waiter && foodItem) {
    waiter.order.push(foodItem);
    console.log(waiters);
  }
  return false; // prevents redirect/refresh
};

<form id="mainForm" action="#">
    <select id="menuMain" name="foodOrder"><option>Mains</option></select>
    <select id="waiters" name="waiterSelection"><option>Waiters</option></select>
    <input type="submit" value="Submit">         
</form>

更新

如果您想保留 waiters，您可以使用 localStorage 或 cookie。如果我将它添加到我的答案中的 sn-p 它将不起作用，因为它是一个沙盒环境，由于安全原因，您无法访问 localStorage 或 cookie。

但是你会按照这些思路做一些事情（未经测试）：

将此添加到onsubmit 的最后一行


    document.cookie=`waiters=${encodeURIComponent(JSON.stringify(waiters))}` // commas are not allowed in cookies and encodeURIComponent replaces commas with the escape sequence %2C

将定义waiters的行改为


   const cookieValue =
      document.cookie.replace(/(?:(?:^|.*;\s*)waiters\s*\=\s*([^;]*).*$)|^.*$/,
      "$1");

   const waiters = cookieValue ?
     JSON.parse(decodeURIComponent(cookieValue)) :
     [new Waiter("Timo"), new Waiter("Lucian"), new Waiter("Arpi")];

【讨论】：

谢谢，这是一种很棒的学习方式，我非常感谢，我想知道是否没有存储信息，所以刷新后订单会留在数组中？这甚至可以单独使用 JS 吗？
不客气！是的，单独使用 JS 是可行的，我会更新我的答案。
更新后的代码对我不起作用，我打算自己做一些关于 JSON 和解析的研究，当我点击提交按钮时，它似乎重新加载了页面，可能会再离开这个旅程。感谢所有帮助:)
您是否从onsubmit 中删除了return false;？这是codepen 上的一个工作示例
不，我没有，但再次感谢所有建设性的帮助:)