[RUBY] Comment créer facilement un pull-down avec des rails

Comment faire un pull-down facilement

Répertoire à utiliser (dans mon cas) ⚠️ Nommez-le vous-même

Formulaire rempli pour viser

95c0f8244478d3536e6dd971b06a4a0f.png

D'abord à partir du fichier de vue (n'importe où)

1. Un tel modèle

java:new.html.erb


<select>
          <option>Veuillez sélectionner un utilisateur avec qui discuter</option>
          <option>Utilisateur 1</option>
          <option>Utilisateur 2</option>
        </select>

2. Il existe également un tel modèle

java:new.html.erb


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

Cette fois, nous allons utiliser 2 f.collection_select </ font> pour créer un menu déroulant!

La 6ème ligne dit ": skill_id, Skill.all", mais ceci est le contenu du menu déroulant que vous voulez sélectionner est sélectionné dans "skill_id model" </ font>, le contenu du modèle est donc suivant J'écrirai!

La modélisation

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

Après cela, écrivez une nouvelle action ou créez une action dans le contrôleur et écrivez-la en vérifiant le routage et le chemin avec les routes des rails et c'est fait!

95c0f8244478d3536e6dd971b06a4a0f.png

Résumé

J'ai omis la partie CSS, mais peut-être que cela ressemble à ceci (essayez-le vous-même)

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

C'est tout de la scène!

Recommended Posts