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>
お礼
ありがとうございます。また機会があったらよろしくお願いします。