JavaScript动态下拉列表值与价格计算器集成指南

function writeDateOptions () {
  const td = new Date(); // 设置日期对象td为今天
  const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
  td.setDate(td.getDate() + 3); // 从今天起加3天作为起始日期
  let ndays = td - new Date(); // 计算与当前日期的毫秒差
  let deadline = td.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});

  // 返回包含天数和描述的选项数组
  return [...Array(18)].map(_ => {
    let numdays = Math.round(ndays / (1000 * 60 * 60 * 24)); // 将毫秒差转换为天数
    let r = td.toLocaleString(
      "en-us", {weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'}
    ) + " @ " + deadline + " " + timezone + " Time (" + numdays + " days)"; // 格式化日期字符串
    td.setDate(td.getDate() + 1); // 日期递增一天
    ndays = td - new Date(); // 更新天数差

    return [numdays, r]; // 返回天数和日期字符串的数组
  });
}

// 获取日期选项数组
const opts = writeDateOptions();

// 获取下拉列表元素
const sel = document.getElementById("deadline");

// 清空并添加一个空白选项作为默认提示
sel.innerHTML = "<option value=''>请选择截止日期</option>" +
                opts.map(([d, o]) => `<option value="${d}">${o}</option>`).join("");

// 获取下拉列表元素
const sel = document.querySelector("select");
// 添加一个空白选项
sel.appendChild(document.createElement("option"));

// 遍历选项数据并创建DOM元素
opts.forEach(function ([numdays, desc]) {
  let opt = document.createElement("option");
  opt.value = numdays;
  opt.textContent = desc;
  sel.appendChild(opt);
});

sel.addEventListener("change", function (evt) {
  // 获取选定选项的value值，并转换为整数
  let days = parseInt(evt.target.options[evt.target.selectedIndex].value);
  let factor = 0; // 初始化价格因子

  // 根据天数确定价格因子
  switch (days) {
    case 3:
    case 4:
      factor = 1.5;
      break;
    case 5:
    case 6:
      factor = 1.4;
      break;
    case 7:
    case 8:
    case 9:
      factor = 1.3;
      break;
    case 10:
    case 11:
    case 12:
    case 13:
    case 14:
      factor = 1.2;
      break;
    case 15:
    default: // 15天及以上，或未匹配到的情况
      factor = 1.0;
  }

  // 这里可以集成你的价格计算逻辑
  // 例如：基础价格 * factor
  // let unitPrice = 10; // 假设基础单价为10
  // let calculatedPrice = unitPrice * factor;

  // 示例：将结果显示在页面上
  document.getElementById("daysfactor").innerText =
    `选择：${days} 天, 价格因子：${factor}`;
  // document.getElementById("calculatedPrice").innerText = `计算价格: $${calculatedPrice.toFixed(2)}`;
});

<select name="deadline" id="deadline" class="form-control" required="required"></select>
<div id="daysfactor"></div>
<!-- 如果有实际价格显示，可以添加另一个元素 -->
<!-- <div id="calculatedPrice"></div> -->