如何使用HTML显示树结构中的选定文本
[英]How to display selected text from tree structure using HTML
问题描述
我有一个困扰我很长时间的问题。 我没有找到解决方案，因此提供一些帮助将是非常欢迎的。
我不知道如何在html中显示选定的文本。 我有一个树状结构，然后从该树状结构中选择一个选项（文本），该文本必须显示在右侧的框中。 下图显示了我的问题和解决方案。
我有两个标签：标签1和标签2，每个标签具有相同的树结构。 当我选择：Tag1->南极洲和Tag2-> Asia-> Southern-West-> India时，这两个选择必须显示在右侧的框中。 看图片。
图片： 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
2 个解决方案
解决方案1
1 2015-03-27 07:58:37
使用jquery .parents（）函数并浏览父元素并创建新树
在点击的元素$（this）.parents（）上
解决方案2
0 2015-03-18 07:49:31
您可以使用DIV，Java脚本和按钮onClick属性来实现此目的。 此处的详细信息： http : //blogs.html5andcss3.org/show-and-hide-div-with-javascript/
如何基于从下拉菜单中选择的选项以HTML显示文本？
[英]How do I display Text in HTML based on an option selected from a Drop-Down Menu?
如果选定的文本是HTML，如何使用javascript获取选定的DOM？
[英]how to get selected DOM using javascript if selected text is HTML?
使用aimaraJS创建树形结构时，如何选择要执行API动作的特定节点？
[英]Using aimaraJS for tree structure creation how to get the specific node selected for performing API action?
如何使用CSS，HTML和一些Javascript显示二叉搜索树？
[英]How to display a binary search tree using CSS, HTML and a bit of Javascript?
如何使用 html、css 和 javascript 从下拉列表中显示所选项目
[英]How to display selected item from drop down using html, css and javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.