JavaScriptでカテゴリー選択に応じてテキストエリアに項目を追加する方法

2011/03/18 09:17

このQ&Aのポイント

以下の質問文章は、JavaScriptを使用してカテゴリー選択に応じてテキストエリアに項目を追加する方法に関するものです。
現在、画面上にはカテゴリー１とカテゴリー２の項目が表示されており、それぞんの項目を選択するとテキストエリアに項目が追加されます。
しかし、現状ではカーソルの位置に項目を追加することができず、同じ項目を選択することもできません。改良方法を教えてください。

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>  <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>