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

How can show the drop down value against the enum value

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 %>

我会使用两个单独的 select 框,每个框都有预期的情况:

   <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来切换它们in/out:

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);

当然,您可以使用不同的策略或包装器来隐藏字段 禁用 select,但是您必须同时执行这两项操作(隐藏的 select 无论如何都会提交)。