jQuery中向<input>追加选中<option>值时仅获取循环最后一条记录的问题

• 赋值逻辑写在option生成循环内，每生成一个option就覆盖一次input值，循环结束后自然仅保留最后一次循环的value2.value
• 未绑定select的选中变化监听事件，手动选择选项时不会触发input值更新
• 当前option的value属性仅存储了外层key，未保留value2.value，选中选项后无法直接读取对应的费用值

第一步：调整option生成逻辑，将value2.value存入option的自定义属性，移除循环内的input赋值代码：

$('select[name="service"]').empty();
$.each(data, function(key, value) {
  $.each(value.costs, function(key1, value1) {
    $.each(value1.cost, function(key2, value2) {
      // 给option添加data-cost自定义属性存储对应value2.value
      $('select[name="service"]').append('<option value="' + key + '" data-cost="' + value2.value + '">' + value1.service + ' - ' + value1.description + ' - ' + value2.value +'</option>');
    });
  });
});
// 可选：初始化时默认显示第一个选项的cost值
$('input[name="cost"]').val($('select[name="service"] option:selected').data('cost'));

第二步：绑定select的change事件，选中选项时更新input值：
如果需要覆盖替换input原有值：

$('select[name="service"]').on('change', function() {
  const selectedCost = $(this).find('option:selected').data('cost');
  $('input[name="cost"]').val(selectedCost);
});

如果需要追加到input原有值末尾：

$('select[name="service"]').on('change', function() {
  const selectedCost = $(this).find('option:selected').data('cost');
  const oldVal = $('input[name="cost"]').val() || '';
  // 可根据需要在中间加分隔符，比如 oldVal + ',' + selectedCost
  $('input[name="cost"]').val(oldVal + selectedCost);
});

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