フォーム： Selectで選択した内容をInputに返したい

Question

現在、フォームを構築しており次の事が可能かどうか質問させて頂きます。

Selectボックスで選択した内容をInputに返したいと考えております。
出来ればvalueでは無くて表示の方を返したいと考えております。

<select name="color" id="color">
	<option value="red"">赤</option>
	<option value="yellow"">黄</option>
	<option value="blue"">青</option>
</select>

<input name="color_name" type="text" id="color_name" value="">

例えば、選択ボックス（select）で青を選択した場合、自動的にinputのフィールドに"青"と入力されるようにしたいと考えております。

どなたかご教授頂ければ幸いです。

Answer 1

<script>
window.addEventListener('DOMContentLoaded', function(e){
  document.querySelector('#color').addEventListener('change',function(e){
    var t=e.target;
    document.querySelector('#color_name').value=t.options[t.selectedIndex].textContent;
  });
});
</script>
<select name="color" id="color">
    <option value="red"">赤</option>
    <option value="yellow"">黄</option>
    <option value="blue"">青</option>
</select>

<input name="color_name" type="text" id="color_name" value="">

調整版

入力欄に100、200、300のどれかを入れるとselectが変化し、表示欄に値が表示される

<script>
HTMLElement.prototype.trigger=function(eventStr){
  if (document.createEvent) {
    var e = document.createEvent("HTMLEvents");
    e.initEvent(eventStr, true, true );
    return this.dispatchEvent(e);
  } else {
    var e = document.createEventObject();
    return this.fireEvent("on"+eventStr, e);
  }
};
window.addEventListener('DOMContentLoaded', function(e){
  document.querySelector('#inp').addEventListener('keyup',function(e){
    var v=e.target.value;
    var c={"100":"red","200":"yellow","300":"blue"};
    if(typeof c[v]!=="undefined"){
      document.querySelector('#color').value=c[v];
    }else {
      document.querySelector('#color').value="";
    }
    document.querySelector('#color').trigger('change');
  });
  document.querySelector('#color').addEventListener('change',function(e){
    var t=e.target;
    document.querySelector('#color_name').value=t.selectedIndex==0?"":t.options[t.selectedIndex].textContent;
  });
});
</script>
<select name="color" id="color">
<option value="">選択</option>
<option value="red">赤</option>
<option value="yellow">黄</option>
<option value="blue">青</option>
</select><br>
入力：<input type="text" id="inp" value=""><br>
表示：<input name="color_name" type="text" id="color_name" value="" readonly>

Comments

[MATRIX]

yambejpさん、早速のご回答ありがとうございます。
上記のソースで一応動くことは確認出来ました。ただし、手動で選択された場合のみみたいです。

Selectボックス(color)の値が別のinputフィールドからonkeyupを使用して自動的に選択された物の場合にも動作するように出来るのでしょうか？
ご確認いただければ幸いです。

[yambejp]

> inputフィールドからonkeyupを使用して自動的に選択された物

とは、具体的にはテキストボックスになにか書くとselectが変わるのですか？
仕様がわかりません

[MATRIX]

はい、その通りです。
上記は分かりやすくする為にカラー選択でサンプルを書いたのですが、実際にやりたいことは郵便番号の自動入力です。
現在、AjaxZip3というライブラリーを使っております。
（ https://github.com/ajaxzip3/ajaxzip3.github.io ）
そこで、郵便番号入力用のinputと都道府県を選択するselectボックスと残りの住所が入力されるinputフィールドがあります。
郵便番号を入力すると自動的に都道府県が選択されます。その後に、残りの住所も別のinputフィールドへと記入されます。
ここでやりたいのは、
1. 郵便番号を入力
2. 都道府県のselectボックスが自動で選択
3. 都道府県の名前が別のinputへと渡される

これをやりたい理由はメールに色々な値を記載する為なのですが、現在の環境の仕様上、都道府県のセレクトボックスからは値を引用出来ない為です。そこで別のフィールドへコピーしてそこからメールへ記載する形となります。

ややこしくてすみません。

[yambejp]

なんとなく想像して調整版をあげておきました。

[MATRIX]

ありがとうございます。
残念ながらこちらの希望の様には動きませんでしたが、ソース自体は問題なく動いてる事を確認いたしました。
やりたい事を具体的に書いた質問を別で作成させて頂きます。
お付き合い頂き、本当にありがとうございました。