JS/Jquery中change与keyup事件的作用域问题及表单数据收集异常

我尝试用JS/Jquery收集多个表单字段的数据提交到API，但修改下拉框或输入框时，只能拿到当前修改字段的值，其他字段都是undefined。

相关代码 #

JS代码

$(".mat-sel").on("change keyup", function() {
  let areaId = $(this).data('area');
  let optionId = $(this).data('option');
  let buildingId = $(this).data('building');
  let choice = $('#type-' + buildingId + '-' + optionId + '-' + areaId).find(":selected").val();
  let length = $('#l-' + buildingId + '-' + optionId + '-' + areaId).val();
  let height = $('#h-' + buildingId + '-' + optionId + '-' + areaId).val();
  console.log('Area: ' + areaId);
  console.log('Option: ' + optionId);
  console.log('Building: ' + buildingId);
  console.log('Choice: ' + choice);
  console.log('Length: ' + length);
  console.log('Height: ' + height);
});

HTML代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<form class="material-picker-3">
  <div class="collapse show">
    <div class="row g-3 my-0 line-collector material">
      <div class="col-sm-4">
        <h5>Type</h5>
      </div>
      <div class="col-sm-8">
        <select id="type-6-5-3" data-building="6" data-option="5" data-area="3" class="form-select mat-sel">
          <option value="0"></option>
          <option value="1">STANDARD</option>
          <option value="1">CUSTOM</option>
        </select>
      </div>
    </div>
  </div>
  <div class="collapse show">
    <div class="row g-3 my-0 line-collector material">
      <div class="col-sm-4">
        <h5>Total Length</h5>
      </div>
      <div class="col-sm-8">
        <div class="input-group mb-3">
          <span class="input-group-text " id="basic-addon1">mm</span> 
          <input id="l-6-1-3" value="0" data-building="6" data-option="1" data-area="3" class="form-control mat-sel l-box" type="number" />
        </div>
      </div>
    </div>
  </div>
  <div class="collapse show">
    <div class="row g-3 my-0 line-collector material">
      <div class="col-sm-4">
        <h5>Total Height</h5>
      </div>
      <div class="col-sm-8">
        <div class="input-group mb-3">
          <span class="input-group-text " id="basic-addon1">mm</span> 
          <input id="h-6-2-3" value="0" data-building="6" data-option="2" data-area="3" class="form-control mat-sel h-box" type="number" />
        </div>
      </div>
    </div>
  </div>
</form>

测试场景与输出 #

• 场景1：选择框值改为1，输入框保持默认值0

  Area: 3
  Option: 5
  Building: 6
  Choice: 1
  Length: undefined
  Height: undefined

• 场景2：选择框值为1，输入框1改为586，输入框2保持默认值0

  Area: 3
  Option: 5
  Building: 6
  Choice: undefined
  Length: 586
  Height: undefined

问题根源 #

你在事件触发时，用**当前操作元素的optionId**去拼接所有字段的ID，但每个字段的optionId是不同的：

• 选择框的data-option="5"，对应IDtype-6-5-3
• 长度输入框的data-option="1"，对应IDl-6-1-3
• 高度输入框的data-option="2"，对应IDh-6-2-3

当操作选择框时，optionId取5，拼接出的长度输入框ID是l-6-5-3——页面中不存在这个元素，所以返回undefined；同理操作输入框时，用它的optionId拼接选择框ID，也找不到对应元素，导致choice为undefined。

解决方案 #

所有字段的buildingId和areaId是统一的，我们可以直接从表单或任意字段获取这两个值，再用每个字段**固定的optionId**拼接ID，就能正确获取所有字段的值：

优化后的JS代码

$(".mat-sel").on("change keyup", function() {
  // 从当前元素所在的表单获取统一的building和area标识
  const $form = $(this).closest('.material-picker-3');
  const buildingId = $form.find('.mat-sel').first().data('building');
  const areaId = $form.find('.mat-sel').first().data('area');
  
  // 用每个字段固定的optionId拼接ID
  let choice = $('#type-' + buildingId + '-5-' + areaId).val();
  let length = $('#l-' + buildingId + '-1-' + areaId).val();
  let height = $('#h-' + buildingId + '-2-' + areaId).val();
  
  console.log('Area: ' + areaId);
  console.log('Building: ' + buildingId);
  console.log('Choice: ' + choice);
  console.log('Length: ' + length);
  console.log('Height: ' + height);
});

更灵活的写法（给表单添加统一标识）

先给表单添加data-building和data-area属性：

<form class="material-picker-3" data-building="6" data-area="3">
  <!-- 原有表单内容不变 -->
</form>

再修改JS代码：

$(".mat-sel").on("change keyup", function() {
  const $form = $(this).closest('.material-picker-3');
  const buildingId = $form.data('building');
  const areaId = $form.data('area');
  
  let choice = $('#type-' + buildingId + '-5-' + areaId).val();
  let length = $('#l-' + buildingId + '-1-' + areaId).val();
  let height = $('#h-' + buildingId + '-2-' + areaId).val();
  
  console.log('Area: ' + areaId);
  console.log('Building: ' + buildingId);
  console.log('Choice: ' + choice);
  console.log('Length: ' + length);
  console.log('Height: ' + height);
});

这样无论操作哪个字段，都能正确获取所有字段的有效值。

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