[RUBY] So erstellen Sie einfach ein Pulldown mit Rails

Wie man einfach einen Pulldown macht

Zu verwendendes Verzeichnis (in meinem Fall) ⚠️ Nennen Sie es selbst

Ausgefülltes Formular zum Zielen

95c0f8244478d3536e6dd971b06a4a0f.png

Zuerst aus der Ansichtsdatei (überall)

1. Ein solches Muster

java:new.html.erb


<select>
          <option>Bitte wählen Sie einen Benutzer aus, mit dem Sie chatten möchten</option>
          <option>Benutzer 1</option>
          <option>Benutzer 2</option>
        </select>

2. Es gibt auch ein solches Muster

java:new.html.erb


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

Dieses Mal verwenden wir 2 f.collection_select </ font>, um ein Pulldown zu erstellen!

In der 6. Zeile steht ": Skill_id, Skill.all", aber dies ist . Der Inhalt des Pulldowns, den Sie auswählen möchten, wird aus "Skill_id-Modell" </ font> ausgewählt. Als Nächstes wird der Inhalt des Modells angezeigt Ich werde schreiben!

Modellieren

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

Schreiben Sie danach eine neue Aktion oder erstellen Sie eine Aktion in der Steuerung und schreiben Sie sie, während Sie die Routen und Pfade mit Schienenrouten überprüfen, und fertig!

95c0f8244478d3536e6dd971b06a4a0f.png

Zusammenfassung

Ich habe den CSS-Teil weggelassen, aber vielleicht sieht es so aus (probieren Sie es selbst aus)

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

Das ist alles von der Szene!

Recommended Posts