我有一个困扰我很长时间的问题。我没有找到解决方案，所以一些帮助将非常受欢迎。
我不知道如何在html中显示所选文字。我有一个树结构，当我从该树结构中选择一个选项（文本）时，该文本必须显示在右侧的框中。下面的图片显示了我的问题以及我的溶剂必须是什么。
我有两个标签：标签1和标签2，每个标签都有相同的树结构。当我选择：Tag1 - ＆gt;南极洲和Tag2->亚洲 - >南 - 西 - >印度，这两个选择必须显示在右侧的框中。看看图片。
照片： http://postimg.org/image/vptxlzn8l/
我到目前为止的代码是：
<!-- Header -->
<h1 style="padding-left:45%"> SELECTION </h1>
</td>
</tr>
<tr>
<td valign="top">
<!-- Content -->
<div class="container responsive-tabs-default">
<ul class="responsive-tabs">
<li><a href="#example-1-tab-1" target="_self">Tag 1</a></li>
<li><a href="#example-1-tab-2" target="_self">Tag 2 </a></li>
</ul>
<div class="responsive-tabs-content bm-larger">
<div id="example-1-tab-1" class="responsive-tabs-panel">
<!-- TREE BEGIN-->
<h1>Naslov</h1>
<!-- <input type="search" id="my-search" placeholder="search"> -->
<ul id="my-tree1">
<li>
<div>Asia</div>
<ul>
<li>
<div>Southern-West</div>
<ul>
<li><div>India</div></li>
<li><div>Pakistan</div></li>
<li><div>Butan</div></li>
</ul>
</li>
<li><div>Southern-East</div>
<ul>
<li><div>Indonesia</div></li>
<li><div>Vietnam</div></li>
<li><div>malaysia</div></li>
</ul>
</li>
<li><div>Far-east</div>
<ul>
<li><div>China</div></li>
<li><div>North Korea</div></li>
<li><div>South Korea</div></li>
<li><div>Japan</div></li>
</ul>
</li>
<li><div>Central</div>
<ul>
<li><div>Mongol</div></li>
<li><div>kazakhstan</div></li>
<li><div>kyrgyzstan</div></li>
</ul>
</li>
</ul>
</li>
<li><div>Antarctica</div></li>
<li>
<div>Africa</div>
<ul>
<li><div>Moroco</div></li>
<li><div>Egypt</div></li>
<li><div>Ghana</div></li>
</ul>
</li>
<li>
<div>Europe</div>
<ul>
<li><div>United Kingdom</div></li>
<li><div>Sweden</div></li>
<li><div>Germany</div></li>
<li><div>France</div></li>
<li><div>Spain</div></li>
<li><div>Italy</div></li>
<li><div>Austria</div></li>
<li><div>Turkey</div></li>
<li><div>Russia</div></li>
<li><div>Denmark</div></li>
<li><div>Finland</div></li>
<li><div>Iceland</div></li>
<li><div>Switzerland</div></li>
<li><div>Hungary</div></li>
</ul>
</li>
</ul>
<!-- TREE END-->
</div>
<div id="example-1-tab-2" class="responsive-tabs-panel">
<h1>Naslov</h1>
<!-- <input type="search" id="my-search" placeholder="search"> -->
<ul id="my-tree2">
<li>
<div>Asia</div>
<ul>
<li>
<div>Southern-West</div>
<ul>
<li><div>India</div></li>
<li><div>Pakistan</div></li>
<li><div>Butan</div></li>
</ul>
</li>
<li><div>Southern-East</div>
<ul>
<li><div>Indonesia</div></li>
<li><div>Vietnam</div></li>
<li><div>malaysia</div></li>
</ul>
</li>
<li><div>Far-east</div>
<ul>
<li><div>China</div></li>
<li><div>North Korea</div></li>
<li><div>South Korea</div></li>
<li><div>Japan</div></li>
</ul>
</li>
<li><div>Central</div>
<ul>
<li><div>Mongol</div></li>
<li><div>kazakhstan</div></li>
<li><div>kyrgyzstan</div></li>
</ul>
</li>
</ul>
</li>
<li><div>Antarctica</div></li>
<li>
<div>Africa</div>
<ul>
<li><div>Moroco</div></li>
<li><div>Egypt</div></li>
<li><div>Ghana</div></li>
</ul>
</li>
<li>
<div>Europe</div>
<ul>
<li><div>United Kingdom</div></li>
<li><div>Sweden</div></li>
<li><div>Germany</div></li>
<li><div>France</div></li>
<li><div>Spain</div></li>
<li><div>Italy</div></li>
<li><div>Austria</div></li>
<li><div>Turkey</div></li>
<li><div>Russia</div></li>
<li><div>Denmark</div></li>
<li><div>Finland</div></li>
<li><div>Iceland</div></li>
<li><div>Switzerland</div></li>
<li><div>Hungary</div></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</td>
<td valign="top">
<div class="container2" >
<ul class="responsive-tabs">
<h3>You have choosen:</h3>
<button type="button">Delete choosen data</button>
<hr>
</ul>
<p>
HERE MUST BE THE SELECTED TEXT FROM TREE STRUCTURE
</p>
</div>
</td>
</tr>
<!-- Footer -->
<!-- JavaScript -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="tabs/js/smoothscroll.min.js" type="text/javascript"></script>
<script src="tabs/js/backbone.js" type="text/javascript"></script>
<script src="tabs/js/responsive-tabs.min.js" type="text/javascript"></script>
<!-- tree begin -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="tree/jquery.treefilter.js"></script>
<script>
$(function() {
var tree = new treefilter($("#my-tree1"), {
searcher : $("input#my-search"),
multiselect : false });
});
</script>
<script>
$(function() {
var tree = new treefilter($("#my-tree2"), {
searcher : $("input#my-search"),
multiselect : false });
});
</script>
<script>
$(function() {
var tree = new treefilter($("#my-tree3"), {
searcher : $("input#my-search"),
multiselect : false });
});
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36251023-1']);
_gaq.push(['_setDomainName', 'jqueryscript.net']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.tree = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- tree end -->
</table>
现在我需要一段代码来解决我的问题：在右侧的框中从树结构中编写所选文本。有人可以帮帮我吗？
感谢您帮助我。
Klemen
答案 0 :(得分：1)
使用jquery .parents（）函数并查看父元素并创建新树
点击元素$（this）.parents（）
答案 1 :(得分：0)
你可以使用DIV，java脚本＆amp;按钮onClick属性来实现这一点。 详细信息： http://blogs.html5andcss3.org/show-and-hide-div-with-javascript/