如何用单个jQuery函数处理多个HTML onchange事件实现选品自动填价

你可以通过DOM节点的层级关联匹配对应的输入框，不需要依赖固定id命名，适配任意新增的同结构行，代码如下：

function myFunction(e) {
  // 获取当前触发事件的下拉框所在的行<tr>
  const currentRow = e.target.closest('tr');
  // 查找当前行内的价格输入框
  const priceInput = currentRow.querySelector('.price');
  // 赋值选中商品的价格
  priceInput.value = e.target.value;
}

方案说明 #

• 用closest('tr')直接定位到当前下拉框所属的行，不受HTML结构小调整的影响
• 用querySelector('.price')匹配当前行内的价格输入框，只要保留输入框的price类名即可，后续新增商品行不需要修改JS代码
• 完全兼容你现有的HTML结构，不需要修改任何HTML代码，直接替换原有JS函数即可生效

如果你希望基于现有id的命名规则实现，也可以使用以下方案：

function myFunction(e) {
  // 提取下拉框id末尾的数字，比如selectitem1提取出1
  const num = e.target.id.replace('selectitem', '');
  // 拼接对应输入框的id完成匹配
  const priceInput = document.getElementById(`myText${num}`);
  priceInput.value = e.target.value;
}

该方案要求后续新增行的id必须严格遵循selectitemN对应myTextN的命名规则。

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