※ ChatGPTを利用し、要約された質問です（原文：javascript）
JavaScriptでカテゴリー選択に応じてテキストエリアに項目を追加する方法
このQ&Aのポイント
以下の質問文章は、JavaScriptを使用してカテゴリー選択に応じてテキストエリアに項目を追加する方法に関するものです。
現在、画面上にはカテゴリー１とカテゴリー２の項目が表示されており、それぞんの項目を選択するとテキストエリアに項目が追加されます。
しかし、現状ではカーソルの位置に項目を追加することができず、同じ項目を選択することもできません。改良方法を教えてください。
現在、下記画面のような
カテゴリー１をクリックすると、ポップアップ形式で
項目1 項目2 項目3 ・・・
カテゴリー２をクリックすると、同じくポップアップ表示で
項目A 項目B 項目C ・・・・
という文字列が表示され、例えばカテゴリ１の「項目1」をクリックすると
テキストエリアに選択された「項目1」が追加されるというものを
以下のサイトを参考に作成しました。
http://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_other/jtagging.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB
----------------------
カテゴリー１
カテゴリー２
・
・
・
テキストエリア
----------------------
(1)しかし、このままだと、テキストエリアのカーソルがある位置にその文字を追加することができません。
(2)また、同じ項目を選択できません。
やりたいイメージは、以下のテキストエリアの状態のとき
(1)
あいう かきく
↑
カーソル位置
「項目1」を選択すると
あいう項目1かきく
となるようにしたい
(2)
あいう項目1
かきく項目1
どこをどのように改造すると上記２項目を実現できるのかがわかりません。
どなたか、お知恵を貸してください。
ソースコードは、以下の通り
HTML
----------
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jQuery.jTagging.js"></script>
<script type="text/javascript">
$(function() {
$("#TagTextArea1").jTagging($("#TagDiv1"), " ");
});
$(function() {
$("#TagTextArea1").jTagging($("#TagDiv2"), " ");
});
</script>
<!-- CSS -->
<link href="drop.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<table>
<tr>
<td>
<div id="items1">
<div class="format">カテゴリ１</div>
<div class="foo">
<div id="TagDiv1" class="box">
<a href="#" onclick="return false;">項目1</a><br />
<a href="#" onclick="return false;">項目2</a><br />
<a href="#" onclick="return false;">項目3</a><br />
<a href="#" onclick="return false;">項目4</a><br />
<a href="#" onclick="return false;">項目5</a><br />
<a href="#" onclick="return false;">項目6</a><br />
<a href="#" onclick="return false;">項目7</a>
</div>
</div>
</td>
<td>
<div id="items2">
<div class="format">カテゴリ２</div>
<div class="foo">
<div id="TagDiv2" class="box">
<a href="#" onclick="return false;">項目A</a><br />
<a href="#" onclick="return false;">項目B</a><br />
<a href="#" onclick="return false;">項目C</a>
</div>
</div>
</div>
</td>
</tr>
</table>
<p>選択内容:</p>
<p><textarea id="TagTextArea1" cols="40" rows="6"></textarea></p>
</body>
</html>
お礼
yyr446さんですか。 その節は、ありがとうございました。 別物を作るか、探したほうが早いですか。。 JavaScriptは、そんなに詳しくは無いので、探して見ます。