JavaScript动态价格计算器实现教程

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《JavaScript动态下拉价格计算器实现教程》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

动态生成带值的下拉列表选项

在许多Web应用中，我们需要根据特定逻辑动态生成下拉列表（<select>）的选项（）。常见需求是将这些选项与某个数值关联起来，以便在用户选择后进行后续的业务逻辑处理，例如价格计算。

原始的JavaScript代码可能仅将格式化的日期字符串作为选项的显示文本。为了实现价格计算，我们需要将与日期关联的数值（例如距离今天的天数）作为选项的value属性。

1. 修改选项数据结构

首先，我们需要调整存储选项数据的数组结构。不再仅仅存储显示文本，而是存储一个包含数值和显示文本的元组（或数组）。

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]; // 返回天数和日期字符串的数组
  });
}

在上述代码中，writeDateOptions函数现在返回一个数组，其中每个元素都是一个[numdays, r]的子数组，numdays是整数天数，r是格式化的日期描述字符串。

2. 将带值的选项渲染到HTML

有了包含数值的数据结构后，我们可以使用map函数和模板字符串将这些数据转换为带有value属性的元素。

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

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

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

这里，opts.map(([d, o]) =>${o})将每个[天数, 描述]元组转换为一个带有value属性的标签，其中d作为value，o作为显示文本。join("")将所有生成的选项字符串连接起来。

替代方案：使用DOM操作创建选项

如果需要更精细的控制或避免直接操作innerHTML可能带来的安全风险，可以使用DOM方法逐个创建和添加选项：

// 获取下拉列表元素
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);
});

实现价格计算逻辑

在下拉列表选项中嵌入了数值后，下一步是监听用户的选择变化，并根据选定的值执行价格计算。

1. 监听change事件

使用addEventListener为下拉列表添加一个change事件监听器。当用户选择一个新选项时，此事件将被触发。

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)}`;
});

2. 获取选定值和计算因子

在事件监听器内部：

• evt.target.options[evt.target.selectedIndex].value 用于获取当前选定选项的value属性。
• parseInt() 函数用于将获取到的字符串值转换为整数，这对于后续的数值比较和计算至关重要。
• 使用switch语句（或if/else if链）根据days的值来确定对应的factor（价格因子）。default分支用于处理所有未明确匹配的days值，通常作为默认或兜底逻辑。

3. 整合HTML结构

为了使上述代码能够正常运行，HTML中需要包含相应的下拉列表元素和一个用于显示结果的元素。

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

注意事项与最佳实践

• 数据类型转换： 从HTML元素（如option.value）获取的值通常是字符串类型。在进行数值比较或计算之前，务必使用parseInt()或parseFloat()进行类型转换。
• 默认选项： 建议在动态生成选项之前添加一个默认的空选项（例如请选择...），以提高用户体验并确保用户明确进行选择。
• 错误处理： 在实际应用中，应考虑parseInt可能返回NaN的情况，尤其是在value属性可能为空或非数字时。
• 代码组织： 将日期生成逻辑封装到单独的函数中（如writeDateOptions）可以提高代码的可读性和可维护性。
• 性能优化： 对于大量选项，直接操作innerHTML可能效率较低。使用DocumentFragment或逐个创建DOM元素并批量添加（如上述forEach示例）是更优的选择。

通过以上步骤，我们不仅能够动态生成具有丰富信息的下拉列表，还能将用户选择与后端逻辑（如价格计算）无缝连接，从而构建出更加交互式和功能强大的Web应用。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~