下記質問「メールフォームで、「select」を選択したら、連動したテキストが「input」にテキスト入力されるフォームを作りたいのですが、一番簡単な方法を教えてください。」の続きです。基本的にはベストアンサーの内容で解決できたのですが、Safariの5.1(2011年頃)で動作確認ができず、その当時の技術で再現可能な方法をご教示頂けると助かります。

http://q.hatena.ne.jp/1533089651

回答の条件
  • 1人1回まで
  • 13歳以上
  • 登録:2018/08/02 16:01:04
  • 終了:2018/08/02 18:31:48

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4752ベストアンサー獲得回数20392018/08/02 18:14:32

ポイント100pt

Safari 5.1 とは、また古いですね。
古い書き方にしてみましたが、動作確認は、今どきのブラウザでしかやってません(というか、できません)。
以下、変更点。

  • HTML
    • form の id 属性を指定
    • カスタムデータ属性を、オレオレ属性に変更
  • javascript
    • DOMContentLoaded → load
    • アロー関数 → 無名関数
    • querySelector → form の getElementById からの name を使ってのプロパティ
    • const → var
    • selectedOptions → selectedIndex
    • dataset → オレオレ属性を getAttribute

HTML

<form id="form">
部署:<select name="department">
<option value=""></option>
<option value="総務" mailaddress="soumu@some.enterprise.com">総務</option>
<option value="経理" mailaddress="keiri@some.enterprise.com">経理</option>
<option value="法務" mailaddress="houmu@some.enterprise.com">法務</option>
</select>
<p>
メールアドレス:
<input name="mailaddress" size="50">
</form>

javascript

window.addEventListener("load", function() {
  var form = document.getElementById("form");
  var sel = form.department;
  var add = form.mailaddress;
  sel.addEventListener("change", function(ev) {
    add.value = sel.options[sel.selectedIndex].getAttribute("mailaddress");
  });
});


jsFiddle にも置きました。
https://jsfiddle.net/2t5kn7ed/

id:sunihate

毎度すみません。とても助かりました!やはり完璧です。ありがとうございます!

2018/08/02 18:31:26

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません