![見出し画像](https://assets.st-note.com/production/uploads/images/119042480/rectangle_large_type_2_35f437d05c58cbe72bab2fab409a78e8.png?width=1200)
はじめる Velo #02
Wix専門のWeb制作会社、合同会社アクトワンのVelo開発部です!
『初心者でも楽しみながらVeloを始められる』をコンセプトに、『はじめる Velo』シリーズを投稿しています!
コーディング未経験でも「やってみたい!」と思えるようなネタを提供したいと思います!
それでは第2回です!
目標
「ドロップダウン」で選んだものを、「テキスト」に表示する
ページ要素(ドロップダウン)
(1)パーツを追加/入力欄/ドロップダウン からドロップダウ
(dropdown1)を1つ追加する。
![](https://assets.st-note.com/img/1697420545843-siCUun0xAk.png)
(2)ドロップダウンの「選択肢を管理」ボタンから「選択肢を管理」
パネルを表示させ、最初の選択肢 Vanilla 横の「3点マーク」を
クリックし、「ラベルを編集」「値を編集」でともに1番と
入力する。残りの2つを2番、3番と入力し、最後の Rocky Road
は「削除」をクリックして削除する。
![](https://assets.st-note.com/img/1697421411118-We9mtlTgfC.png)
(3)「設定」ボタンから「ドロップダウンの設定」パネルを表示させ、
「プレースホルダーテキスト」に 番号を選ぶ と入力する。
![](https://assets.st-note.com/img/1697421688001-cnCxfpPRAd.png)
(4)画面右下のプロパティパネルの「onChange」をクリックする。
(5)すぐ右に現れた「dropdown1_change」右の ⊕ ボタンをクリック
する。コードパネルに現れたコードのうち薄字の部分を全て消去
する。
![](https://assets.st-note.com/img/1697423778852-YTQ9VshQkJ.png)
ページ要素(テキスト)
(1)パーツを追加/テキスト/おすすめスタイル からテキスト
(text1)を1つ追加する。
![](https://assets.st-note.com/img/1697422332417-kn1PlEYtMR.png)
コード(dropdown1)
(1)ドロップダウンの値をテキストに代入するために以下のコードを
設定する。
![](https://assets.st-note.com/img/1697424051361-c0fRJJ63YW.png)
プレビュー
ドロップダウンで選んだものがテキストに表示される。今回はドロップダウンのデザインを変えていないが、枠や選択肢の色は自由に変えることができる。
![](https://assets.st-note.com/img/1697425179606-wGlPCROTyQ.png)
Velo開発のご依頼はこちら
この記事が気に入ったらサポートをしてみませんか?