如何根据枚举值显示下拉值

Question

status 是一个下拉菜单，如果它是一项功能，则具有值（新、已启动、已完成）；如果它是一个错误，则为（新、已启动和已解决）。我不知道我该怎么做

型号

Class Task
  enum typeOf: %i[feature bug]
  enum status_is: %i[New started completed resolved]
end

erb.html

<%= form_for :task, url: project_tasks_path, :html => {:multipart => true, :cla

   <%= f.hidden_field :project %>
   Title: <%=f.text_field :title, class:"form-control" %><br>
   Description: <%=f.text_field :description, class:"form-control" %><br>
   <label for="deadline">Deadline</label><input type="datetime-local" id="deadline"
                                         name="deadline" ><br>
   Screen Shot: <%=f.file_field :screen_shot, multiple: true, class:"form-control" %>
   <div class="field">
     <%= f.label :typeOf, class:"form-control" %><br />
     <%= f.select(:typeOf, Task.typeOfs.keys.map {|role| [role.titleize,role]}) %>
   </div>

   <div class="field">
     <%= f.label :status_is, class:"form-control" %><br />
     <%= f.select(:status_is, Task.status_is.keys.map {|role| [role.titleize,role]}) %>
   </div>
   <%= f.submit "Add" %>

<%end %>

Answer 1

我会选择两个单独的选择框，每个选择框都有预期的情况：

   <div class="field" data-target="bug">
     <%= f.label :status_is, class:"form-control" %><br />
     <%= f.select(:status_is, (Task.status_is.keys - ['completed']).map {|role| [role.titleize,role]}) %>
   </div>

   <div class="field" data-target="feature">
     <%= f.label :status_is, class:"form-control" %><br />
     <%= f.select(:status_is, (Task.status_is.keys - ['resolved']).map {|role| [role.titleize,role]}) %>
   </div>

然后你使用一些 javascript 来切换它们的输入/输出：

function toggleSelects() {
  var value = $('#task_typeOf')[0].value;

  $('[data-target=bug]').toggle(value === 'bug');
  $('[data-target=bug] select').attr('disable', value !== 'bug');

  $('[data-target=feature]').toggle(value === 'feature');
  $('[data-target=feature] select').attr('disable', value !== 'feature');
}

// execute every time the type of task is changed
$('#task_typeOf').on('change', () => toggleSelects());

// also execute at document load
$(toggleSelects);

当然，您可以使用不同的策略或包装器来隐藏字段和禁用选择，但您必须同时执行这两种操作（无论如何都会提交隐藏的选择）。