• はてなアカウントでログイン
• 無料ユーザー登録

ベストアンサー

• a-kuma32018/08/01 13:10:10

  満足100pt

  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/

  スター

  • 

    3件のコメントを見る

  • sunihate 2018/08/01 14:23:48

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

    スター

  • a-kuma3 2018/08/01 14:38:56

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

    回答に追記しました。

    スター

  • sunihate 2018/08/01 14:48:01

    完璧です。素晴らしいです。ありがとうございます！

    スター

その他の回答

この質問へのコメント

質問の情報

登録日時

2018-08-01 11:14:11

終了日時

2018-08-01 14:47:13

回答条件

1人2回まで

この質問のカテゴリ

• ウェブ制作

この質問に含まれるキーワード

人気の質問

• すぐお金になる働き方で求人以外にありますか？業界人でなくても 需要あれば働けるという日本人の多いとこ…ao87453011日前
• 民法施行法（明治三十一年法律第十一号）という古い法令の第6条: 契印について⇒民法施行法： 第六条　私署…匿名質問者111日前
• 無料で、食べ物をもらったことありますか？たとえば、コンビニ、スーパーなど。…ao87453011日前
• 宅地建物取引士が集まる店はありますか？ao87453011日前
• 民間の求人で、即採用の求人は 未経験の職種でみつかりましたか？ao87453011日前

メニュー

• 質問一覧
• カテゴリ一覧
• 無料ユーザー登録
• 人力検索はてなトップ

PC版

• お問い合わせ
• ヘルプ
• お知らせ
• はてなトップ