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    </body>
18</html>

jquery
1$(function () {
2
3// 切り替えたセリフテンプレートをテキストエリアに反映
4var SerifSelect = $('.p-SelectGroup');
5 var textarea = $('body textarea');
6SerifSelect.each(function (i, el) {
7  $(this).on('change', function () {
8    var selectedTemplate = $(this).find('option:selected').val();
9    
10    $(textarea[i]).val(selectedTemplate);
11  });
12})
13
14});
15
16

いつもお世話になっております。
左のセレクトボックスを選択すると右のテキストエリアを反映することが実装できましたが
●もっとやりたいこと
テンプレ1を選択
↓
右のテキストエリア内にテンプレ1のテキストが反映されました
テンプレ1の横に”abcdef”を入力し続けました。
↓
セレクトボックスにも一回テンプレ1を選択
↓
テキストエリア内にテンプレ1に戻したいいいいいいい.

どなたかお分かりになるかた、ご教示いただけると助かります。

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

回答1件

セレクトボックスをchangeするごとにセレクトボックス自体を戻せばよいのでは？

javascript
1$(function () {
2  var template = [
3    '', 'テンプレ1', 'テンプレ2', 'テンプレ3'
4    ];
5    $('select').on('change', function () {
6    var i = $(this).val();
7    $('textarea').val(template[i]);
8    $(this).val("");
9  })
10});

更新ボタン

javascript
1<script>
2$(function () {
3  var template = [
4    '', 'テンプレ1', 'テンプレ2', 'テンプレ3'
5    ];
6    $('select').on('change', function () {
7      var i = $(this).val();
8      $('textarea').val(template[i]);
9  });
10  $('#mod').on('click',function(){
11    $('select').trigger('change');
12  });
13});
14</script>
15<form action="">
16<select name="" id="">
17<option value="">----</option>
18<option value="1">サンプル１</option>
19<option value="2">サンプル２</option>
20<option value="3">サンプル３</option>
21</select>
22<input type="button" value="更新" id="mod">
23<textarea name="" id="" cols="30" rows="10"></textarea>
24</form>

投稿2019/11/18 11:03

編集2019/11/19 02:38

yambejp

総合スコア116661

firefire123

2019/11/19 01:31

yambejp様、ご回答ありがとうございます。確かに >セレクトボックスをchangeするごとにセレクトボックス自体を戻せばよいのでは？なんですが $(this).val("");　を書くことでセレクトボックスはいつも"----"なっているのであまりよろしくないです。セレクトボックスで選択したoptionがそのoptionのvalueが表示したいのでなんがもっといい方法があるでしょうか？ちなみに、今Jqueryの書き方がちょっと変更しました。

yambejp

2019/11/19 01:49

ちょっと確認ですが「テンプレ1を選択」後、textareaをイジってすでに「テンプレ1」が選択されている状態のセレクトボックスを「一回テンプレ1を選択」するというのはすでに選択されている状態なのですから変更しないということですよね？変更がなければchangeイベントは発火しませんが？

firefire123

2019/11/19 02:19

yambejp様、ご回答ありがとうございます。 >すでに選択されている状態なのですから変更しないということですよね？ >変更がなければchangeイベントは発火しませんが？はい、yambejp様が仰る通りです。が、望ましいのはセレクトボックスに選択した値はそのまま表示したいので良い方法があるんでしょうか？もしかして、 >すでに選択されている状態なのですから変更しないということですよね？こうしないと実現出来ないでしょうか？

yambejp

2019/11/19 02:29

セレクトボックスを変更しないのであればもう一個更新ボタンでもつくってボタンをおすとセレクトボックスの指定値に変えればいいでしょうその場合UIに工夫が必要な気がしますが

firefire123

2019/11/19 02:40

yambejp様、ご回答ありがとうございます。 >もう一個更新ボタンでもつくってこれも解決方法の一つですね。ありがとうございます。

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