JavaScript如何根据下拉选框多选项值更新表单字段并计算长方体体积

解决方案 #

核心修改逻辑是在尺寸选择触发函数pilihUkuran中增加预设尺寸的解析、计算逻辑，同时修正原有代码的不规范部分，具体修改如下：

1. 替换原有JS代码 #

// 页面加载完成后自动计算默认选中尺寸的体积
window.onload = function() {
  pilihUkuran();
}

function pilihUkuran() {
  const ukuranSelect = document.getElementById("ukuran");
  const customInputArea = document.getElementById("customukuran1");
  const selectedValue = ukuranSelect.value;

  // 简化自定义输入区域显隐逻辑，无需逐个匹配预设值
  customInputArea.style.visibility = selectedValue === "custom" ? "visible" : "hidden";

  // 预设尺寸场景自动计算体积
  if (selectedValue !== "custom") {
    // 将尺寸字符串按x分割为长宽高三个数值，调用已有的mult函数计算
    const [panjang, lebar, tinggi] = selectedValue.split('x').map(Number);
    mult(panjang, lebar, tinggi);
  } else {
    // 切换到自定义模式时清空结果，等待用户输入
    document.getElementById('rupiah').value = '';
  }
}

function mult(pj, lb, tg) {
  // 增加非空判断，避免输入不全时显示NaN
  if (pj && lb && tg) {
    const hasil = Number(pj) * Number(lb) * Number(tg);
    document.getElementById('rupiah').value = hasil;
  } else {
    document.getElementById('rupiah').value = '';
  }
}

2. 修正HTML非法嵌套问题 #

原有代码将自定义输入的<input>标签嵌套在了<select>标签内，不符合HTML规范，可能导致输入框交互异常，请将自定义输入区域的代码替换为如下内容：

<div id="customukuran1" style="visibility: hidden;">
  <input class="customp" id="custom_panjang" onkeyup="mult(this.value,document.getElementById('custom_lebar').value,document.getElementById('custom_tinggi').value);" name="custom_panjang" type="number" placeholder="Panjang (cm)">

  <input class="customl" id="custom_lebar" onkeyup="mult(document.getElementById('custom_panjang').value,this.value,document.getElementById('custom_tinggi').value);" name="custom_lebar" type="number" placeholder="Lebar (cm)">

  <input class="custom3" id="custom_tinggi" onkeyup="mult(document.getElementById('custom_panjang').value,document.getElementById('custom_lebar').value,this.value);" name="custom_tinggi" type="number" placeholder="Tinggi (cm)">
  <br>
</div>

优化说明 #

• 简化了冗余的条件判断，后续新增预设尺寸只需在select中加option即可，无需修改JS逻辑
• 增加了参数校验，避免出现非数字的异常结果
• 页面初始化自动填充默认预设尺寸的计算结果，无需用户手动触发
• 切换自定义/预设模式时自动清空上一次的结果，逻辑更符合使用习惯

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