人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

メールフォームで、「select」を選択したら、連動したテキストが「input」にテキスト入力されるフォームを作りたいのですが、一番簡単な方法を教えてください。
名前を選択したら、該当者のメールアドレスが表示されるといった単純な連動を想定しています。

●質問者: sunihate
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
●100ポイント ベストアンサー

javascript でやるのが簡単だと思います。
select 要素の onchange イベントで、選択されている option の value に指定されているメールアドレスを、別の input 要素の value に設定します。
こんな感じ。

HTML

部署:
<select name="department">
 <option value=""></option>
 <option value="soumu@some.enterprise.com">総務</option>
 <option value="keiri@some.enterprise.com">経理</option>
 <option value="houmu@some.enterprise.com">法務</option>
</select>

<p>
メールアドレス:
<input name="mailaddress" size="50">

javascript

window.addEventListener("DOMContentLoaded", _ => {
 const sel = document.querySelector('[name="department"]');
 const add = document.querySelector('[name="mailaddress"]');
 sel.addEventListener("change", ev => {
 add.value = sel.selectedOptions[0].value;
 });
});


jsFiddle にも置いておきました。
https://jsfiddle.net/1aptznw5/




追記です。

この場合、部署とメールアドレスの値が同じになってしまうのですが、部署は選択内容にしつつ同じような挙動を得る事は可能でしょうか。

メールアドレスは、option の value ではなく、カスタムデータ属性に持つようにしてみました。

HTML

部署:
<select name="department">
 <option value=""></option>
 <option value="総務" data-mail="soumu@some.enterprise.com">総務</option>
 <option value="経理" data-mail="keiri@some.enterprise.com">経理</option>
 <option value="法務" data-mail="houmu@some.enterprise.com">法務</option>
</select>

<p>
メールアドレス:
<input name="mailaddress" size="50">

javascript

window.addEventListener("DOMContentLoaded", _ => {
 const sel = document.querySelector('[name="department"]');
 const add = document.querySelector('[name="mailaddress"]');
 sel.addEventListener("change", ev => {
 add.value = sel.selectedOptions[0].dataset.mail;
 });
});

jsFiddle の方も、追記の内容にしてます。
https://jsfiddle.net/1aptznw5/11/


sunihateさんのコメント
ありがとうございます!ほぼできました。 この場合、部署とメールアドレスの値が同じになってしまうのですが、部署は選択内容にしつつ同じような挙動を得る事は可能でしょうか。

a-kuma3さんのコメント
>> この場合、部署とメールアドレスの値が同じになってしまうのですが、部署は選択内容にしつつ同じような挙動を得る事は可能でしょうか。 << 回答に追記しました。

sunihateさんのコメント
完璧です。素晴らしいです。ありがとうございます!
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ