如何用jQuery实现select选项变化时为对应匹配input批量赋值

问题排查 #

你的代码中存在3处核心错误：

• 选择器范围错误：$(this).find()的作用是查找当前<select>标签的后代元素，而你要定位的td属于表格其他节点，不在select的子节点树内，自然无法匹配到目标元素
• 输入框选择器错误：你写的find('input.price')是查找携带price类的输入框，但你给出的HTML代码中所有input都没有设置price类，匹配不到对应元素
• HTML属性配置错误：第二个Set对应的<select>标签的data-pset属性错写为set1，需要改为set2才能匹配下方td.set2的类名

修正后代码 #

JS逻辑部分 #

$("select.set_price").change(function() {
  var pset = $(this).data('pset');
  // 若页面存在多个表格，可替换为 $(this).closest('table').find('td.' + pset) 缩小查找范围避免影响其他表格
  $('td.' + pset).find('input').val($(this).val());
});

修正后的Set2对应select标签 #

<select class="set_price" data-pset="set2">
  <option value="" disabled selected>Set2</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

修改完成后即可实现select选项变更时，对应分组的所有输入框同步更新取值的需求。

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