如何简化重复的jQuery下拉框数据捕获代码？

首先，你的代码里存在大量重复的取值和函数调用逻辑，我们可以通过统一元素标识和逻辑复用来大幅简化代码，同时让代码更易维护。

第一步：给HTML元素添加统一标识与关联数据 #

先给下拉框和文本框加上统一的类名，并用data-*属性建立元素间的关联（假设你的HTML结构如下）：

<!-- Row 1 相关元素 -->
<select id="name1" class="name-select"></select>
<select id="date1" class="date-select" data-linked-name="name1" data-target-textbox="1"></select>
<select id="date2" class="date-select" data-linked-name="name1" data-target-textbox="2"></select>
<select id="date3" class="date-select" data-linked-name="name1" data-target-textbox="3"></select>
<select id="date4" class="date-select" data-linked-name="name1" data-target-textbox="4"></select>
<select id="date5" class="date-select" data-linked-name="name1" data-target-textbox="5"></select>

<input type="text" id="1" class="result-textbox">
<input type="text" id="2" class="result-textbox">
<!-- ... 其他Row1文本框 -->

<!-- Row 2 相关元素 -->
<select id="name2" class="name-select"></select>
<select id="date-row2-1" class="date-select" data-linked-name="name2" data-target-textbox="6"></select>
<!-- ... 其他Row2的日期下拉框 -->

这里的核心是用data-linked-name绑定日期下拉框对应的姓名下拉框ID，用data-target-textbox绑定要更新的文本框ID，同时给同类元素加统一类名，方便批量选择。

第二步：重构refreshText函数 #

原来的重复代码可以通过遍历元素来替代，自动读取关联数据完成逻辑：

function refreshText() {
  // 遍历所有日期下拉框，批量处理逻辑
  $('.date-select').each(function() {
    const $dateBox = $(this);
    const dateValue = $dateBox.val();
    // 通过data属性获取关联的姓名下拉框ID并取值
    const linkedNameId = $dateBox.data('linked-name');
    const nameValue = $(`#${linkedNameId}`).val();
    // 通过data属性获取目标文本框ID
    const targetTextboxId = $dateBox.data('target-textbox');

    // 调用业务函数
    myFunction(dateValue, nameValue, targetTextboxId);
  });
}

这样不管你新增多少个日期下拉框，只要维护好HTML里的data-*属性，JS代码无需改动。

第三步：简化事件绑定 #

原来长长的选择器列表可以用类名替代，实现批量绑定：

$(document).ready(function() {
  // 给所有姓名、日期下拉框绑定change事件
  $('.name-select, .date-select').change(function() {
    refreshText();
  });
});

可选优化：按需更新（提升性能） #

如果不需要每次都刷新所有文本框，只更新当前修改项对应的内容，可以直接在change事件里处理，避免全量遍历：

$(document).ready(function() {
  // 日期下拉框变化时，仅更新自身关联的文本框
  $('.date-select').change(function() {
    const $dateBox = $(this);
    const dateValue = $dateBox.val();
    const linkedNameId = $dateBox.data('linked-name');
    const nameValue = $(`#${linkedNameId}`).val();
    const targetTextboxId = $dateBox.data('target-textbox');

    myFunction(dateValue, nameValue, targetTextboxId);
  });

  // 姓名下拉框变化时，更新所有关联它的日期项对应的文本框
  $('.name-select').change(function() {
    const $nameBox = $(this);
    const nameValue = $nameBox.val();
    const nameId = $nameBox.attr('id');

    // 找到所有关联当前姓名下拉框的日期框
    $(`.date-select[data-linked-name="${nameId}"]`).each(function() {
      const dateValue = $(this).val();
      const targetTextboxId = $(this).data('target-textbox');
      myFunction(dateValue, nameValue, targetTextboxId);
    });
  });
});

这个优化能减少不必要的函数调用，在元素数量较多时更高效。

优化后的优势 #

• 可维护性：新增/修改下拉框时，只需调整HTML的data-*属性，无需改动JS
• 可读性：元素间的关联逻辑清晰可见，代码结构更简洁
• 容错性：消除了复制粘贴带来的重复代码，降低出错概率

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