セレクトボックスとラベルをNode.js + MySQLで連動させる

前提・実現したいこと

Node.js + MySQL + Expressの練習でフォームを制作しております。
フォームにセレクトボックスとラベルがあり、セレクトボックスで選択した値によってラベルに表示する内容を変更したいです。

MySQLにはIDと名前、メールアドレスの3つをもった以下のlistテーブルが存在します。他にもいくつかテーブルが存在します。

+------+-----------+--------------------+
| id | name | mail |
+------+-----------+--------------------+
| 1 | user1 | user1@mail.com |
| 2 | user2 | user2@mail.com |
| 3 | user3 | user3@mail.com |
+------+-----------+--------------------+

発生している問題・エラーメッセージ

セレクトボックスには名前を表示させることができているのですが、
user1を選択したときはuser1@mail.comを表示させるということを
node.js + mysqlで実現する方法がわからず詰まっております。

該当のソースコード

ejs
1<select input name="input_name">
2    <span>名前</span>
3    <% for(var j in userdata) {%>
4    <% var usr_obj = userdata[j]; %>
5    <option value="userdata"><%= usr_obj.name %></option>
6    <% } %>
7 </select>
8<label>
9   <span>メールアドレス</span>
10   <input id="mail" name="input_mail">
11</label>

javascript
1app.get("/", async (req, res) => {
2const usr_sql = "select * from user";
3let user_results = await queryAsync(usr_sql);
4
5const sql = "select * from list";
6let result = await queryAsync(sql);
7
8res.render("index.ejs",{userdata: user_results,content: result});
9});
10
11

試したこと

if文で処理するのかと思いましたが、ラベルに表示したい値をハードコーディングしていないため、どのように記述するか方法が思い浮かばない状況です。

分かりづらい質問かもしれませんが、よろしくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

第一段階として、まずHTMLとJavaScriptだけで目的を満たすコードをハードコーディングしてみる、
というアプローチはいかがでしょうか？
これができれば、第二段階としてハードコーディング部分をejsで自動生成するように実装すればよいです。

2020/05/25 20:15 ごろ追記
第一段階のサンプルを作ってみました。
htmlファイルを作成し、コードを全部貼り付ければ動作確認できるかと思います。

HTML
1<label>
2  <span>名前</span>
3  <select id="username">
4    <option value="">
5    <option value="user1@mail.com">user1
6    <option value="user2@mail.com">user2
7  </select>
8</label>
9<label>
10  <span>メールアドレス</span>
11  <input id="mail">
12</label>
13<script>
14  document.getElementById("username").addEventListener('change', changeName);
15  function changeName() {
16    const username = document.getElementById("username");
17    const mail = document.getElementById("mail");
18    mail.value = username.value;
19  }
20</script>