如何根据下拉框选中的次数调用指定函数getOrderData？

实现方案 #

首先修正原有代码的逻辑缺陷：

1. 下拉框的option初始化逻辑不要放在getOrderData函数里，否则每次调用该函数都会重复添加option，导致下拉框选项冗余，建议把初始化逻辑放到页面加载完成的回调中仅执行一次
2. 需要先将下拉框选中的字符串类型数值转为数字类型，再通过循环执行对应次数的getOrderData即可

Jade文件代码（无需修改） #

p
strong Number of pieces:
select(id='numOfPieces')

修改后的Javascript文件代码 #

// 页面加载完成后仅初始化一次下拉框选项
$(document).ready(function() {
  const dropdown = document.getElementById("numOfPieces");
  const options = ["1", "2", "3", "4", "5"];
  
  for(let i = 0; i < options.length; i++) {
    const opt = options[i];
    const el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    dropdown.appendChild(el);
  }
})

// 单独封装你要执行的业务逻辑
function getOrderData() {
  // 此处填写你的实际业务代码
  console.log('执行一次getOrderData')
}

$("#yes").click(function () {
  const dropdown = document.getElementById("numOfPieces");
  // 把选中的字符串值转换为数字
  const executeTimes = Number(dropdown.options[dropdown.selectedIndex].value);
  // 循环执行对应次数
  for(let i = 0; i < executeTimes; i++) {
    getOrderData();
  }
})

注意事项 #

• 上述代码基于项目已经引入jQuery的前提，如果未引入jQuery，把$(document).ready和jQuery点击事件替换为原生JS实现即可
• 如果getOrderData是异步函数，需要自行调整循环逻辑为异步串行/并行执行模式

内容的提问来源于stack exchange，提问作者Maroun