How to easily create a pull-down in Rails

How to make a pull-down easily

Directory to use (in my case) ⚠️ Name yourself

Completed form to aim for

95c0f8244478d3536e6dd971b06a4a0f.png

First from the view file (anywhere)

1. Such a pattern

java:new.html.erb


<select>
          <option>Please select a user to chat with</option>
          <option>User 1</option>
          <option>User 2</option>
        </select>

2. There is also such a pattern

java:new.html.erb


  <div class="mentors-detail">
   <div class="form">
     <div class="weight-bold-text">
skill
       <span class="indispensable">Mandatory</span>
     </div>
     <%= f.collection_select(:skill_id, Skill.all, :id, :name, {}, {class:"select-box", id:"mentor-skill"}) %>
　　　</div>

This time we will use 2 f.collection_select </ font> to create a pull-down!

The 6th line says ": skill_id, Skill.all", but this is the content of the pull-down you want to select is selected from "skill_id model" </ font>, so next is the contents of the model I will write!

Modeling

skill_id.rb


class Skill < ActiveHash::Base
  self.data = [
    { id: 1, name: '--' },
    { id: 2, name: 'HTML•CSS' },
    { id: 3, name: 'Ruby' },
    { id: 4, name: 'Javascript' },
    { id: 5, name: 'PHP' },
    { id: 6, name: 'Python' },
    { id: 7, name: 'SQL' },
    { id: 8, name: 'GO' },
  ]
end

After that, write a new action or create action in the controller and write it while checking the routing and path with rails routes and it's done!

95c0f8244478d3536e6dd971b06a4a0f.png

Summary

I've omitted the CSS part, but maybe it looks like this (try it yourself)

new.css



.mentors-detail {
  display: flex;
  justify-content: space-between;
  padding: 2vh 0;
}

.mentors-detail>.form {
  width: 300px;
  padding: 2vh 0;
}

.select-box {
  margin: 2vh 0;
}

That's all from the scene!

Recommended Posts