jquery 获取x个单独选择字段的平均选择值

fnvucqvd  于 2022-11-22  发布在  jQuery
关注(0)|答案(2)|浏览(100)

我 有 多 个 选择 字段 作为 星级 字段 供 用户 选择 , 同时 给出 一 个 像 下面 的 2 选择 字段 的 审查 ( 虽然 我 有 5 在 我 的 代码 , 这里 只 添加 2 ) 。 现在 我 试图 得到 每个 选择 的 值 , 并 附加 在 隐藏 字段 的 名称 评级 选择 的 平均 值 。 我 该 怎么 做 呢 ?

<select name="multi_rating_item_service" id="multi_rating_item_service" class="star-rating" required="">
        <option value="">Rate…</option>
        <option value="5">Perfect</option>
        <option value="4">Good</option>
        <option value="3">Average</option>
        <option value="2">Not that bad</option>
        <option value="1">Very poor</option>
    </select>
    <select name="multi_rating_item_delivery" id="multi_rating_item_delivery" class="star-rating" required="">
        <option value="">Rate…</option>
        <option value="5">Perfect</option>
        <option value="4">Good</option>
        <option value="3">Average</option>
        <option value="2">Not that bad</option>
        <option value="1">Very poor</option>
    </select>
    <input type="hidden" name="rating" id="rating" value="here goes the average" />

中 的 每 一 个
我 试 过 使用 jquery , 但是 在 多次 尝试 之后 都 无法 使用 , 我 受 够 了 它 。 所以 , 我 删除 了 所有 的 jquery , 而是 在 提交 表单 时 用 PHP 计算 平均 值 。 虽然 它 可以 工作 , 但是 由于 某种 原因 , 它 带来 了 一些 意外 的 问题 。 所以 ,我 认为 我们 需要 使用 隐藏 字段 提交 评级 值 , 以 消除 这些 问题 。 如果 你 能 帮助 , 这 将 是 非常 有益 的 我 。

    • 更新 : * * 我 认为 您 可能 没有 在 原始 帖子 中 获得 足够 的 信息 。 因此 , 这里 有 一 个 更新 。 我 在 同一 个 订单 页面 上 有 多 个 添加 评论 表单 ( 要求 客户 对 该 订单 中 的 每 种 产品 进行 评论 ) 。 因此 , 这 为 处理 所有 表单 带来 了 一定 的 复杂 性 。

然后 , 另 一 个 复杂 性 是 管理 员 可以 配置 他/她 想要 添加 的 评级 ( 他/她 还 可以 在 管理 面板 中 设置 评级 类型 的 ID ) , 这些 评级 将 作为 选择 字段 显示 给 客户 。 因此 , 这 增加 了 另 一 个 复杂 性 级别 , 我们 不 知道 选择 字段 的 ID 名称 , 因此 我们 可以 在 变量 中 硬 编码 ID 值 。

y1aodyip

y1aodyip1#

您需要使用以下内部脚本:

  • change()函数,用于在任何输入更改时选择HTML select元素。
  • 根据元素数计算平均值。例如:由于只存在两个HTML select元素,因此平均情况如下:(val1 + val2) / 2(2个元素)

第一个

lfapxunr

lfapxunr2#

您可以使用onChange事件处理程序在JQuery中执行此操作:

$('#id1, #id2, #id3, #idN').change((event) => {
  let first = Number.parseInt($('#id1').val());
  let second = Number.parseInt($('#id2').val());
  let nth = Number.parseInt($('#idN').val());

  const average = (first + second + nth) / n;

  $('#rating').val(average);
});

伪代码将onChange事件处理程序附加到所有select元素,当其中任何一个元素发生更改时,它将重新计算平均值。
无论如何,你也可以使用普通JS来实现这一点。普通JS带来了一个小的(大多数时候可以忽略不计的)性能改进,但是很多第三方包开始从JQuery回到普通JS。JS中的querySelector函数与JQuery选择器的工作原理相同。
编辑以进行更新:如果不知道select元素的ID,仍然可以使用DOM遍历来获得相同的效果。使用form的ID,然后将onChange处理程序应用于它下面的所有选择。在事件处理程序中,可以将所有select元素抓取到一个数组中。使用forEach或可能使用map对它进行循环,以获得select值的总和,然后除以数组的长度。

相关问题