Ruby on Rails窗体通过文本框添加"Other“选项以选择下拉列表

# app/models/preference.rb
class Preference < ApplicationRecord
end

# db/migrate/xxxxxx_create_preferences.rb
class CreatePreferences < ActiveRecord::Migration[6.1]
  def change
    create_table :preferences do |t|
      t.string :option
      t.timestamps
    end
  end
end

<!-- app/views/preferences/new.html.erb -->
<%= form_with model: @preference, local: true do |form| %>
  <div class="field">
    <%= form.label :option %>
    <%= form.select :option, Preference.options, { include_blank: 'Select an option' }, { id: 'preference_option' } %>
    <%= form.text_field :option, placeholder: 'Other', style: 'display:none;', id: 'other_option' %>
  </div>

  <div class="actions">
    <%= form.submit %>
  </div>
<% end %>

<script>
  document.getElementById('preference_option').addEventListener('change', function() {
    if (this.value === 'Other') {
      document.getElementById('other_option').style.display = 'inline';
    } else {
      document.getElementById('other_option').style.display = 'none';
    }
  });
</script>

# app/controllers/preferences_controller.rb
class PreferencesController < ApplicationController
  def new
    @preference = Preference.new
  end

  def create
    @preference = Preference.new(preference_params)
    if @preference.save
      redirect_to @preference, notice: 'Preference was successfully created.'
    else
      render :new
    end
  end

  private

  def preference_params
    params.require(:preference).permit(:option)
  end
end

document.addEventListener('DOMContentLoaded', function() {
  var selectElement = document.getElementById('preference_option');
  var otherOption = document.getElementById('other_option');

  selectElement.addEventListener('change', function() {
    if (this.value === 'Other') {
      otherOption.style.display = 'inline';
    } else {
      otherOption.style.display = 'none';
    }
  });

  // 初始化状态
  if (selectElement.value === 'Other') {
    otherOption.style.display = 'inline';
  }
});