如何计算动态星级评分选择框平均值并填入隐藏字段

核心思路 #

通过事件委托监听所有星级评分下拉框的变化，针对每个下拉框所在的表单，单独计算该表单内所有选中评分的平均值，再赋值给对应表单的隐藏字段。

原生JavaScript实现代码 #

// 监听页面上所有星级评分select的change事件（事件委托，兼容动态生成的元素）
document.addEventListener('change', function(e) {
  // 判断触发事件的元素是否是星级评分select（可根据实际class调整）
  if (e.target.tagName === 'SELECT' && e.target.classList.contains('star-rating')) {
    // 找到当前select所在的表单
    const form = e.target.closest('form');
    if (!form) return;

    // 获取当前表单内所有星级评分select的选中值
    const ratingSelects = form.querySelectorAll('.star-rating');
    let total = 0;
    let count = 0;

    ratingSelects.forEach(select => {
      const value = parseFloat(select.value);
      // 只统计有有效值的选项（避免未选择的情况）
      if (!isNaN(value)) {
        total += value;
        count++;
      }
    });

    // 计算平均值，至少有一个有效评分才计算
    const average = count > 0 ? (total / count).toFixed(1) : 0;
    // 找到当前表单内name为rating的隐藏字段并赋值
    const hiddenRating = form.querySelector('input[name="rating"]');
    if (hiddenRating) {
      hiddenRating.value = average;
    }
  }
});

jQuery实现代码（修正常见错误写法） #

// 事件委托监听星级评分select的change
$(document).on('change', 'select.star-rating', function() {
  const $form = $(this).closest('form');
  if (!$form.length) return;

  let total = 0;
  let count = 0;

  $form.find('select.star-rating').each(function() {
    const value = parseFloat($(this).val());
    if (!isNaN(value)) {
      total += value;
      count++;
    }
  });

  const average = count > 0 ? (total / count).toFixed(1) : 0;
  $form.find('input[name="rating"]').val(average);
});

注意事项 #

• 确保所有星级评分的select都有统一的class（比如star-rating），如果没有统一class，可根据select的name特征、父元素类名等调整选择器。
• toFixed(1)用于保留1位小数，可根据需求改为toFixed(2)保留两位，或直接去掉使用原始计算值。
• 代码默认忽略未选择的评分项，若需强制所有项选择后才计算，可添加判断逻辑，比如验证count是否等于表单内评分select的总数后再赋值。

内容的提问来源于stack exchange，提问作者M.S Shohan