Ruby on Rails下拉选择框添加Other选项并支持自定义提交值

浏览器原生<select>元素存在默认限制：如果通过JS给<select>设置的value没有对应的子<option>节点，浏览器会自动将<select>的value置为空，导致提交到后端的emitter_type值为空，最终存入数据库为null，回显时自然找不到对应选项显示为空。

方案一：前端修改提交逻辑，改动最小 #

不用调整后端逻辑，通过新增隐藏字段绕过select的原生限制：

1. 修改ERB表单代码，新增隐藏字段作为最终提交的真值，原select仅作为交互控件，取消它的name属性避免提交无效值：

<%# 新增隐藏字段，用来提交最终的emitter_type值 %>
<%= form.hidden_field :emitter_type, id: "emitter_type_final" %>

<%# 原select取消name，仅用于交互，新增自定义id %>
<%= form.select(:emitter_type, BoilerPlant.emitter_type, include_blank: true, name: nil, id: "emitter_type_select") %>

<%# 调整显示隐藏逻辑，判断当前值是否为预设之外的自定义值 %>
<% emitter_type_val = boiler_plant.emitter_type %>
<% is_custom = emitter_type_val.present? && !BoilerPlant.emitter_type.include?(emitter_type_val) %>
<% if !is_custom %>
  <div id="emitter_other" style="display:none;">
<% else %>
  <div id="emitter_other">
<% end %>
  <%= form.label(:emitter_type_other, class: "form-label") %>
  <%= form.text_field(:emitter_type_other, value: is_custom ? emitter_type_val : "", autocomplete: "off", autocapitalize: "on", class: "form-input") %>
  </div>

<%# 新增初始化JS，处理回显逻辑 %>
<script>
document.addEventListener("DOMContentLoaded", function() {
  const select = document.getElementById("emitter_type_select");
  const isCustom = <%= is_custom ? 'true' : 'false' %>;
  if (isCustom) {
    select.value = "Other";
  } else {
    select.value = "<%= j emitter_type_val.to_s %>";
  }
});
</script>

2. 修改提交逻辑的JS代码，直接给隐藏字段赋值：

var toggleRevertValues = document.getElementById("plant_submit_button");
var emitterTypeSelect = document.getElementById("emitter_type_select");
var emitterOtherInput = document.getElementById("boiler_plant_emitter_type_other");
var emitterTypeFinal = document.getElementById("emitter_type_final");

toggleRevertValues.addEventListener("click", function(e) { 
  if (emitterTypeSelect.value === "Other") {
    emitterTypeFinal.value = emitterOtherInput.value.trim();
  } else {
    emitterTypeFinal.value = emitterTypeSelect.value;
  }
});

方案二：后端处理参数，前端代码改动少 #

不用修改前端提交逻辑，直接在后端参数处理阶段替换值：

1. 调整Controller的参数处理逻辑，优先取自定义文本框的值：

def create
  boiler_plant_params = params.require(:boiler_plant).permit(:emitter_type, :emitter_type_other, # 其他允许的字段)
  # 替换自定义值
  if boiler_plant_params[:emitter_type] == "Other" && boiler_plant_params[:emitter_type_other].present?
    boiler_plant_params[:emitter_type] = boiler_plant_params[:emitter_type_other].strip
  end
  @boiler_plant = BoilerPlant.new(boiler_plant_params)
  # 后续原有保存逻辑不变
end

# update动作同理修改参数即可

2. 调整模型校验规则，如果有inclusion校验需要排除自定义值的情况：

# 原有的emitter_type包含性校验修改为
validates :emitter_type, presence: true
validates :emitter_type, inclusion: { in: BoilerPlant.emitter_type }, unless: :custom_emitter_type?

def custom_emitter_type?
  !BoilerPlant.emitter_type.include?(emitter_type)
end

3. 回显逻辑和方案一的ERB调整部分一致，判断当前值是否为自定义值，渲染对应状态即可。

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