jQuery实现多组Select onChange联动更新Input总价（无ID/类/名）

没问题，我来给你写个完全符合要求的实现——不靠ID、类名或者名称定位元素，纯靠DOM关系就能搞定需求：

<form>
  <!-- 第一组示例 -->
  <select data-price="10">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <input type="number" readonly>

  <!-- 第二组示例 -->
  <select data-price="25">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
  <input type="number" readonly>
</form>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).on('change', 'form select', function() {
  // 从当前触发事件的select里取数量和单价
  const quantity = parseInt($(this).val()) || 0;
  const unitPrice = parseFloat($(this).data('price')) || 0;
  // 计算总价并赋值给对应的input
  $(this).next('input').val(quantity * unitPrice);
});
</script>

核心逻辑拆解 #

• 事件绑定：用$(document).on('change', 'form select', ...)监听所有表单内的select下拉框，哪怕后续动态新增的组也能生效，比直接绑定更灵活。
• 无标识定位：全程用this指代触发事件的当前select元素，完全不需要任何额外标识，这是满足需求的关键。
• 关联对应input：利用$(this).next('input')找到当前select紧邻的input——只要你的每组结构是select跟input挨着的，这个DOM关系就非常可靠；如果组内有其他元素（比如包裹在div里），可以换成$(this).closest('.group-container').find('input')（把.group-container换成实际的父元素标签即可），依然不需要ID或类名定位当前触发元素。
• 容错处理：加了|| 0的判断，防止出现非数字值导致的NaN问题，让计算更稳健。

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