セレクトタグの選択に合わせてインプットの初期値を変更する方法

RailsでのWEBアプリを開発する際、jQueryを使ってセレクトタグに連動してインプットの初期値を変更する方法を調べました。
自分用のメモとして学んだことをまとめます。

RailsにjQueryを導入

jQueryの導入方法についてはこの記事では割愛しますが、以前書いた以下の記事が参考になると思います。

セレクトタグの内容を取得

まずはセレクトタグの内容を取得するために、jsファイルにこのように記入します。

jsファイル

$('select[name="対象のセレクトタグのname属性"]').change(function() {
　var val = $(this).val();

　ここに処理を書いていく

});

セレクトタグの選択に応じて処理を指定

次に、対象のセレクトタグの値が変わった場合の処理を先程のコードに追記していきます。
やることとしては、セレクトタグの値に応じてinnerhtmlで値を指定します。

jsファイル

$('select[name="対象のセレクトタグのname属性"]').change(function() {
  var val = $(this).val();
  if (val == "セレクトタグのvalue1") {
    $('input[name="対象のインプットのname属性"]').val("入力したい初期値1");
  } else if (val == "セレクトタグのvalue2") {
    $('input[name="対象のインプットのname属性"]').val("入力したい初期値2");
  } else if (val == "セレクトタグのvalue3") {
    $('input[name="対象のインプットのname属性"]').val("入力したい初期値3");
  }
});

ちなみに初期値を変えたいのがインプットではなくテキストエリアの場合は次のような記載になります。

jsファイル

$('select[name="対象のセレクトタグのname属性"]').change(function() {
  var val = $(this).val();
  if (val == "セレクトタグのvalue1") {
    $('input[name="対象のテキストエリアのname属性"]').html("入力したい初期値1");
  } else if (val == "セレクトタグのvalue2") {
    $('input[name="対象のテキストエリアのname属性"]').html("入力したい初期値2");
  } else if (val == "セレクトタグのvalue3") {
    $('input[name="対象のテキストエリアのname属性"]').html("入力したい初期値3");
  }
});

これでセレクトタグに応じてインプットやテキストエリアの初期値が変わるはずです！