高级Javascript—使用循环在HTML中列出Json数据，并使用显示模式触发元素更改事件

我写了一个我正试图解决的实际问题的工作示例

我创建了一个对象，模拟我从数据库得到的

json

返回

我需要：

• 列出合同和合同批次
• 进入该功能时，在下拉列表中将合同的最后一批标记为选中
• 进入该功能时，仅显示

  ul invoices

  元素中所选合同的最后一批

  发票

• 更改批次时加载并显示相应的发票

问题：

• 我无法列出所选合同最后一批的发票
• 虽然有一个函数用于

  onchange=“getInvoices”

  ，但我始终没有定义

  getInvoices

注意：

• 进入页面时，我已经拥有所选合同的信息，在本例中，我将合同保留为

  ID 1

• 在本例中，我使用考勤中的

  类定义所选合同

• 我正在使用

  显示模式

  ，我希望保留此模式

让lblContract=document.querySelector（“#contracts”）；
让UlInvoices=document.querySelector（“#ul发票”）；
收缩趋势=1；
const objectContract={
id:1，
诺姆：“瓦格纳”，
合同：[{
id:1，
合同：“123456”，
批次：[{
id:1，
合同编号：1，
批次：“1”，
发票：[{
数值：10，
批号：1，
}]
},
{
id:2，
合同编号：1，
批次：“2”，
发票：[{
数值：10，
批号：2，
}]
}]
},
{
id:2，
合同：“246789”，
批次：[{
id:3，
合同编号：2，
批次：“1”，
发票：[{
价值：20，
批号：3，
}]
}]
}]
}
const reveling=（函数（）{
函数privateInit（）{
const contracts=objectContract.contracts；
让contractFilteredById=contracts.filter（contract=>contract.id===ContractNatTendance）；
for（合同的施工合同）{
const selectedContract=contract.id==contractFilteredById[0]。id？“出席”：“”；
//让batchFilteredById=contract.batches.filter（batch=>batch.id==BatchInAttentince）；
让htmlForBatchsOptions=contract.batches.map（batch=>`${batch.batch}'）.join（“”）；
lblContract.innerHTML+=
`
${contract.contract}
${htmlForBatchsOptions}
`;
const batchOption=document.querySelector（'select.sel batch'）；
batchOption.value=2；
/！*加载发票的创建方法*/
}
}
/！*更改sel批次时加载发票的方法修复*/
函数getInvoices（selectObject）{
console.log（'populateinvoices元素#ul invoices'）；
}
返回{
init:privateInit（）
}
})();
reveling.init；

此模式中的IIFE函数使该方法成为私有方法，因此不能以这种方式添加处理程序，因为它试图找到一个不存在的全局方法

您需要按以下方式分配事件处理程序：

      lblContract.innerHTML +=
        `<div class="contract-${selectedContract}" style="display: flex;">
                        <div id="contract-${contract.contract}" data-contract="${contract.id}" class="loren">
                            <span>${contract.contract}</span>
                        </div>
                        <div class="ipsulum" style="margin-left: 5px;">
                            <select class="sel-batch">
                                ${htmlForBatchsOptions}
                            </select>
                        </div>
                    </div>`;

      const batchOption = lblContract.querySelector('select.sel-batch');
      // The event listener holds a reference to the inner function
      batchOption.addEventListener("change", getInvoices);

lblContract.innerHTML+=
`
${contract.contract}
${htmlForBatchsOptions}
`;
const batchOption=lblContract.querySelector（'select.sel batch'）；
//事件侦听器保存对内部函数的引用
batchOption.addEventListener（“更改”，获取发票）；

我在问题上更新的内容是在onchange上使用此选项，可能您的回答涉及部分问题，我还有其他问题您可以使用

此.value

查找所选值，然后您可以轻松获得所需的内容。