SelectのOptionを選んだら投稿フォームに定型文をインサートしたい

###前提・実現したいこと
Teratailの投稿フォームのような記入しやすいWysiwygを実装したいと思っています。
現在は、Railsで利用できそうなSummerNoteかBootsyを利用したいと予定していますが、その中でこのTeratailの投稿フォームのように

１．「基本テンプレート」を選択するとフォーム内にコピペされる。
２．記入したものがプレビューで即座に閲覧できる

ということを実現したいと思っています。

今のところHTML（Markdownではなく）を想定しております。

###試したこと

JSで実現するのだろうことは想像できるのですが、JSが不勉強でよく理解できていません。。。
ググって下記のようにやったのですが、<option></option>ではこの投稿欄のように複数行に渡ってペーストするにはふさわしくない、と思いどのようにすべきか皆様に教えてほしいと思っています。

宜しくお願いします！

kei344

2016/07/08 02:13

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。

行動規範の内容に同意します

回答1件

ベストアンサー

html
1<!DOCTYPE HTML>
2<html lang="ja">
3	<head>
4		<meta charset="UTF-8">
5		<title></title>
6	</head>
7	<body>
8		<form action="">
9			<select name="" id="">
10				<option value="">----</option>
11				<option value="1">サンプル１</option>
12				<option value="2">サンプル２</option>
13				<option value="3">サンプル３</option>
14			</select>
15			<textarea name="" id="" cols="30" rows="10"></textarea>
16		</form>
17
18		<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
19		<script type="text/javascript">
20			$(function () {
21				var template = [
22					'', 'テンプレ1', 'テンプレ2', 'テンプレ3'
23				];
24
25				$('select').on('change', function () {
26					var i = $(this).val();
27					$('textarea').val(template[i]);
28				});
29			});
30		</script>
31	</body>
32</html>