使用对象数组中的两个值更新 HTML

Posted 2023-05-07

【中文标题】使用对象数组中的两个值更新 HTML

【英文标题】：Update HTML using two values from array of objects

【发布时间】：2020-04-20 18:10:50

【问题描述】：

我有一个对象数组，每个对象都有一个 age 和 balance 属性。

我有一个带有自选字段的表单和一个函数，用于循环并使用所有 balances.age 值填充自选。

<form id="myForm">
  <select id="selectAge">
    <option>Age</option>
  </select>
</form>

var balances = [
    
        age: 23,
        balance: 10000
    ,
    
        age: 25,
        balance: 24000
    
]

function getAge()    
  for(var i = 0; i < balances.length; i++) 
    var opt = balances[i].age;
    var el = document.createElement("option");
    el.text = opt;
    el.value = opt;
    select.add(el);
    

我想使用选定的年龄值并将数组的相应余额插入到下面的一些 html 中。

<h2>You should have $<span id="insertBalance"></span>.</h2> 

我对此一无所知，并且可能一开始就犯了这个错误。如何找到每个选定年龄的正确余额并将其显示在我的文档中？

【参考方案1】：

你已经很接近了。将事件侦听器添加到下拉菜单以侦听更改。发生更改时，使用find 对balances 数组执行线性搜索，以匹配选定的年龄event.target.value。

请注意，线性搜索很慢，因此如果搜索变成瓶颈，您可能希望将 balances 数组转换为对象或将 Map 转换为 age->balance 对。

const balances = [
  
    age: 23,
    balance: 10000
  ,
  
    age: 25,
    balance: 24000
  
];

const selectEl = document.getElementById("select-age");
const balanceEl = document.getElementById("insert-balance");

for (const e of balances) 
  const opt = document.createElement("option");
  selectEl.appendChild(opt);
  opt.text = e.age;
  opt.value = e.age;


selectEl.addEventListener("change", event => 
  const found = balances.find(e => e.age == event.target.value);
  balanceEl.innerText = found ? found.balance : "";
);

<select id="select-age">
  <option>Age</option>
</select>
<h2>You should have $<span id="insert-balance"></span>.</h2>

【讨论】：

如此简单！谢谢参观。确认这对我有用。

【参考方案2】：

const myForm    = document.getElementById('my-form')
  ,   balanceEl = document.getElementById("insert-balance")
  ,   balances  = [  age: 23, balance: 10000 ,  age: 25, balance: 24000  ] 
  ;
balances.forEach((elm,i)=>
  
  myForm.selectAge.options[i] = new Option(elm.age, elm.balance)
  )
myForm.oninput=_=>  
  
  balanceEl.textContent = myForm.selectAge.value
  
myForm.onsubmit=e=> 
  
  e.preventDefault()   // disable form submit
  
balanceEl.textContent = myForm.selectAge.value

<form action="xxx" method="POST" id="my-form">
  <select name="selectAge">
    <optgroup label="Age">
  </select>
</form>

<h2>You should have $<span id="insert-balance"></span>.</h2>