Ruby on Rails：options_for_select绑定onchange调用JS函数失效问题

问题核心 #

当前代码存在两个关键问题：

• getMaxCapacity() 函数逻辑错误：直接将整个 capacity 对象赋值给数字字段的 max 属性，而非根据选中航班ID获取对应容量值
• 缺少页面初始化处理：页面加载完成后，乘客数字段不会自动匹配当前选中航班的容量

修复步骤 #

1. 修正getMaxCapacity()函数逻辑

修改JavaScript函数，先获取选中的航班ID，再从capacity对象中取出对应容量赋值给乘客字段的max属性，同时可选处理超出最大值的乘客数：

function getMaxCapacity(selectElement) {
  const selectedFlightId = selectElement.value;
  const passengersInput = document.getElementById('passengers');
  // 设置乘客字段最大值
  passengersInput.max = capacity[selectedFlightId];
  
  // 若当前乘客数超过新最大值，自动调整并同步总价
  if (parseInt(passengersInput.value) > capacity[selectedFlightId]) {
    passengersInput.value = capacity[selectedFlightId];
    calculateTotalPrice();
  }
}

2. 优化onchange事件绑定

在Rails的select标签中传递this参数，让函数直接获取当前选中元素，避免重复查找DOM：

<%= form.select :flight_id, options_for_select(Flight.all.map {|flight| [flight.name, flight.id]}, form.object.id), onchange: 'getMaxCapacity(this)' %>

3. 页面加载时初始化最大值

添加DOM加载完成后的初始化逻辑，确保默认选中航班的容量被设置为乘客字段的最大值：

document.addEventListener('DOMContentLoaded', function() {
  getMaxCapacity(document.getElementById('reservation_flight_id'));
});

4. 修复capacity/costs对象的语法隐患

用Rails的to_json方法生成更安全的JavaScript对象，避免手动循环产生的多余逗号问题：

var capacity = <%= Flight.pluck(:id, :capacity).to_h.to_json %>;
var costs = <%= Flight.pluck(:id, :cost).to_h.to_json %>;

完整修正代码示例 #

ERB视图部分

<div class="field">
  <%= form.label :flight_id %>
  <%= form.select :flight_id, options_for_select(Flight.all.map {|flight| [flight.name, flight.id]}, form.object.id), onchange: 'getMaxCapacity(this)' %>
</div>

<div class="field">
  <% qty = @reservation.passengers %>
  <%= form.label :passengers %>
  <%= form.number_field :passengers, id: 'passengers', min: 1, onchange: "calculateTotalPrice()", oninput: "calculateTotalPrice()" %>
</div>

JavaScript脚本部分

<script type="text/javascript">
  var capacity = <%= Flight.pluck(:id, :capacity).to_h.to_json %>;
  var costs = <%= Flight.pluck(:id, :cost).to_h.to_json %>;

  function getMaxCapacity(selectElement) {
    const selectedFlightId = selectElement.value;
    const passengersInput = document.getElementById('passengers');
    passengersInput.max = capacity[selectedFlightId];
    
    if (parseInt(passengersInput.value) > capacity[selectedFlightId]) {
      passengersInput.value = capacity[selectedFlightId];
      calculateTotalPrice();
    }
  }

  function calculateTotalPrice() {
    var price = costs[document.getElementById('reservation_flight_id').value];
    document.getElementById('cost').value = document.getElementById('passengers').value * price;
  }

  // 页面初始化时设置最大值
  document.addEventListener('DOMContentLoaded', function() {
    getMaxCapacity(document.getElementById('reservation_flight_id'));
  });
</script>

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