如何用jQuery/JS实现长度、宽度、面积三个关联下拉框的单位联动功能

前置HTML调整 #

你现有代码中onchange事件绑定在<option>标签上是不生效的，你可以直接删除所有<option>上的onchange属性，用下方JS代码统一绑定事件即可，无需修改其他HTML结构。

jQuery实现版本 #

先在页面引入jQuery依赖，之后添加如下代码：

$(function() {
  // 给三个下拉框统一绑定变更事件
  $('#length, #width, #area').on('change', function() {
    const selectedUnit = $(this).val();
    // 未选择有效单位时不触发联动
    if (!selectedUnit) return;
    // 同步三个下拉框的选中值
    $('#length, #width, #area').val(selectedUnit);
    // 同步更新计量体系显示
    const system = selectedUnit === 'feet' ? 'imperial' : 'metric';
    $('#measure').val(system);
  })
})

原生JavaScript实现版本 #

不需要引入任何依赖，直接添加如下代码即可：

document.addEventListener('DOMContentLoaded', function() {
  const lengthSel = document.getElementById('length');
  const widthSel = document.getElementById('width');
  const areaSel = document.getElementById('area');
  const measureInput = document.getElementById('measure');

  // 单位联动处理函数
  function syncUnit(e) {
    const selectedUnit = e.target.value;
    if (!selectedUnit) return;
    // 同步所有下拉框单位
    lengthSel.value = selectedUnit;
    widthSel.value = selectedUnit;
    areaSel.value = selectedUnit;
    // 同步计量体系
    measureInput.value = selectedUnit === 'feet' ? 'imperial' : 'metric';
  }

  // 给三个下拉框绑定变更事件
  lengthSel.addEventListener('change', syncUnit);
  widthSel.addEventListener('change', syncUnit);
  areaSel.addEventListener('change', syncUnit);
})

效果验证 #

• 任意修改长度、宽度、面积任意一个下拉框的选中值，另外两个会自动同步到对应单位，面积自动显示对应文本（sqft/m²）
• 计量体系输入框会同步更新为imperial/metric，完全匹配需求

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