JavaScriptを使ってブラウザのセレクトボックスで選択したら、テキストボックスなどに選択した値を入力する方法をご紹介します。

まずはHTML側です。onchange()でJavaScriptの関数が呼び出されるように記述しておきます。

<form name="myForm">
  <select name='mySelect' onchange="inputValue()">
    <option value="">----</option>
    <option value="あいうえお">あ行</option>
    <option value="かきくけこ">か行</option>
    <option value="さしすせそ">さ行</option>
    <option value="たちつてと">た行</option>
  </select>
 
  <textarea name="myBody" rows=5></textarea>
</form>

次にJavaScript側です。

セレクトボックスで値が変更されたら、inputValue関数が呼びされますので、まずはセレクトボックスで選択している位置(index)を取得します。そして、取得した位置の値(value)を取得します。そして、取得したvalueをテキストエリアのvalueに代入してやればOKです。(※textareaの場合は、innerHTMLではなく、valueに代入です。)

/**
 * ----------------------------------------------------------
 * inputValue()
 * selectで選択した値をtextareaに代入する
 * ----------------------------------------------------------
 */
function inputValue() {
 
  // selectで選択した値を取得
  var index = document.myForm.mySelect.selectedIndex;
  var value= document.myForm.mySelect.options[index].value;
 
  // テキストエリアに貼り付け
  document.myForm.myBody.value = value;
}

IEは注意が必要

IEだと以下のようにoptionにonclickを入れても動作しませんので注意が必要です。selectのほうにonchangeを入れて利用するのがselect文では使いやすいと思います。

<form name="myForm">
  <select name='mySelect'>
    <option value="">----</option>
    <option value="あいうえお" onclick="inputValue()">あ行</option>
～～～省略～～～

ブラウザ毎の確認作業はコストアップの要因

全てのブラウザに問題なく対応するというのは非常にコストのかかる作業です。アイスケットでは、お客様にシステムを少しでも価格を抑えてご提供したいという考えから、お客様には差し支えがなければChromeかFirefoxを使ってくださいとお願いしています。そうすることによって、ブラウザ毎の確認作業時間が削減でき、ご希望のシステムを低価格でお客様にご提供することができています。

こちらの投稿も読んでみませんか？

  1. [JavaScript]目標日までのカウントダウンを作る方法
  2. [JavaScript]子ウインドウから親ウインドウの関数を実行する
  3. [JavaScript]数字を文字列として連結する方法
  4. [JavaScript]動的に行を追加する
投稿タグ