jQuery条件价格计算异常：多选类别数量变更未触发价格更新

我是编程新手，在此提前致歉。我正在网站上制作一个包含价格计算功能的联系表单，价格取决于用户选择的国家与所选「classes」的数量。
示例规则：若用户选择欧盟，选1个class时价格为€1100，选2个为€1150，选3个为€1400，选4个及以上则每个额外加€200。
我尝试用jQuery获取选中classes的数量（已成功），并通过if条件设置价格。问题在于：通过countSelectedItems函数更新classes数量时，setPrice函数无响应，但手动修改数量时该函数正常工作。请指出我的错误所在？

现有JS代码 #

$("#form-field-classes").change(function() {
  countSelectedItems();
}).change();

function countSelectedItems() {
  var count = $("#form-field-classes :selected").length;
  //console.log(count);
 parseInt($("#form-field-count").val(count));}
 
$("#form-field-count").change(function() {setPrice();
}).change();

function setPrice()
{
    if($("#form-field-count").val() === 1){
        $("#result").text("1100");
    }}

现有HTML代码 #

<select name="form_fields[classes][]" id="form-field-classes" type="select" multiple="" data-options='["Class 1","Class 2","Class 3","Class 4","Class 5","Class 6"]'  placeholder="Choose...">
<option value="Class 1">Class 1</option>
<option value="Class 2">Class 2</option>
<option value="Class 3">Class 3</option>
<option value="Class 4">Class 4</option>
<option value="Class 5">Class 5</option>
<option value="Class 6">Class 6</option>
        
<input type="number" name="form_fields[count]" id="form-field-count">

<br /> Total: &euro; <span id="result"></span>

核心问题是通过代码修改input的值时，不会自动触发change事件——只有用户手动输入或选择时，浏览器才会触发该事件。所以你在countSelectedItems里更新了#form-field-count的value，但setPrice绑定的是这个input的change事件，自然不会执行。

另外还有两个小问题：

1. parseInt($("#form-field-count").val(count)) 是无效代码，val(count)已经完成赋值操作，parseInt在这里多余且无意义。
2. setPrice里的判断$("#form-field-count").val() === 1 存在类型不匹配问题：input的val()返回的是字符串，和数字1用严格相等（===）比较会不匹配，应该改成parseInt($("#form-field-count").val()) === 1 或者使用非严格相等（==）。

修正方案 #

有两种简单的解决方式：

方式一：更新input值后手动触发change事件

修改countSelectedItems函数，设置完值后调用trigger('change')，触发绑定的事件：

function countSelectedItems() {
  var count = $("#form-field-classes :selected").length;
  $("#form-field-count").val(count).trigger('change'); // 手动触发change事件
}

方式二：直接调用setPrice函数

既然countSelectedItems是在classes变化时执行，不如直接在这个函数里调用setPrice，省去触发事件的步骤：

$("#form-field-classes").change(function() {
  countSelectedItems();
  setPrice(); // 直接调用价格计算函数
}).change();

function countSelectedItems() {
  var count = $("#form-field-classes :selected").length;
  $("#form-field-count").val(count);
}

完善后的完整代码（包含全部价格规则） #

结合你提到的完整价格规则，补全setPrice函数的逻辑：

$("#form-field-classes").change(function() {
  countSelectedItems();
  setPrice();
}).change();

$("#form-field-count").change(function() {
  setPrice();
}).change();

function countSelectedItems() {
  var count = $("#form-field-classes :selected").length;
  $("#form-field-count").val(count);
}

function setPrice() {
  var count = parseInt($("#form-field-count").val()) || 0; // 处理空值或非数字输入的情况
  var price = 0;
  
  if (count === 1) {
    price = 1100;
  } else if (count === 2) {
    price = 1150;
  } else if (count === 3) {
    price = 1400;
  } else if (count >= 4) {
    price = 1400 + (count - 3) * 200; // 3个基础价1400，每多一个class加200
  }
  
  $("#result").text(price);
}

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