名前を選択したら、該当者のメールアドレスが表示されるといった単純な連動を想定しています。
javascript でやるのが簡単だと思います。
select 要素の onchange イベントで、選択されている option の value に指定されているメールアドレスを、別の input 要素の value に設定します。
こんな感じ。
部署: <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">
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 ではなく、カスタムデータ属性に持つようにしてみました。
部署: <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">
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/