100分，在线求一效果，当一个文档框获得一个焦点时，在文本框的正下方显示一个div,解决办法
日期：2014-05-16 浏览次数：20387 次
100分，在线求一效果，当一个文档框获得一个焦点时，在文本框的正下方显示一个div,
这个div的宽度和文本框宽度相同，长度固定（若div内的内容过长，则可显示滚动条），当点击div中的文字时，将文字输入到文本框中，关于div标签的显示。
效果图如下所示：
http://www.blogjava.net/images/blogjava_net/davidxu/areatree.gif
其实主要是想实现该篇文章中类似的效果，如果能有热心人提供该文章相似的效果尤嘉
http://www.blogjava.net/davidxu/archive/2005/08/17/multilevelTree.html
（该文章中使用了htc,由于本人对htc不了解，虽然作者讲解了已经较为详细，但是我还是无法实现，文章所说的效果）
还请各位高手帮忙
------解决方案--------------------
<SCRIPT LANGUAGE= "JavaScript ">
function strPage(a)
{
document.getElementById( 'diva ').style.display= " "
document.getElementById( 'diva ').style.left=a.offsetLeft+ 'px '
document.getElementById( 'diva ').style.top=a.offsetTop+ a.offsetHeight+ 'px '
}
</SCRIPT>
<input type= "text " width= "30px " onfocus= "strPage(this) ">
<div id= "diva " style= "overflow-y:auto;height:25px;width:35px;display:none;position:absolute ">
1111111111
222222222
1111111111
222222222
1111111111
222222222
1111111111
222222222
</div>
<input type= "text " width= "30px " >
------解决方案--------------------
用 JS 实现以下 4 点功能，IE 6 下测试正常！
1 div的宽度和文本框宽度相同，
2 长度固定（若div内的内容过长，则可显示滚动条），
3 当点击div中的文字时，将文字输入到文本框中，
4 div标签的显示与效果图相似，但样式表及实现原理不同。
至于那个树完全可以用 ul 和 li 的多级嵌套实现，网上有不少例子，LZ 动手搜搜吧！
代码如下， L@_@K：
<body>
<table border= "0 " cellpadding= "0 " cellspacing= "0 ">
<tr>
<td> 所属区域 </td>
<td> <input type= "text " id= "txtRegion " />
<div id= "divRegionList " style= "display: none; border: 1px solid #0000ff; overflow: hidden; height: 150px; position: absolute; background-color: #ff0000; ">
<table width= "100% " border= "0 " cellpadding= "0 " cellspacing= "0 ">
<tr>
<td>
<div style= "overflow: auto; width: 100%; height: 132px; background-color: #90EE90; ">
<ol>
<li> 北京 </li>
<li> 天津 </li>
<li> 上海 </li>
<li> 重庆 </li>
<li> 河北 </li>
<li> 河南 </li>
<li> 山东 </li>
<li> 山西 </li>
<li> 江西 </li>
<li> 江苏 </li>
<li> 浙江 </li>
<li> 内蒙古 </li>
</ol>
</div>
</td>
</tr>
<tr>
<td align= "right " id= "tdClose " style= "cursor: hand; background-color: #ff8888; "> Close </td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
这个div的宽度和文本框宽度相同，长度固定（若div内的内容过长，则可显示滚动条），当点击div中的文字时，将文字输入到文本框中，关于div标签的显示。
效果图如下所示：
http://www.blogjava.net/images/blogjava_net/davidxu/areatree.gif
其实主要是想实现该篇文章中类似的效果，如果能有热心人提供该文章相似的效果尤嘉
http://www.blogjava.net/davidxu/archive/2005/08/17/multilevelTree.html
（该文章中使用了htc,由于本人对htc不了解，虽然作者讲解了已经较为详细，但是我还是无法实现，文章所说的效果）
还请各位高手帮忙
------解决方案--------------------
<SCRIPT LANGUAGE= "JavaScript ">
function strPage(a)
{
document.getElementById( 'diva ').style.display= " "
document.getElementById( 'diva ').style.left=a.offsetLeft+ 'px '
document.getElementById( 'diva ').style.top=a.offsetTop+ a.offsetHeight+ 'px '
}
</SCRIPT>
<input type= "text " width= "30px " onfocus= "strPage(this) ">
<div id= "diva " style= "overflow-y:auto;height:25px;width:35px;display:none;position:absolute ">
1111111111
222222222
1111111111
222222222
1111111111
222222222
1111111111
222222222
</div>
<input type= "text " width= "30px " >
------解决方案--------------------
用 JS 实现以下 4 点功能，IE 6 下测试正常！
1 div的宽度和文本框宽度相同，
2 长度固定（若div内的内容过长，则可显示滚动条），
3 当点击div中的文字时，将文字输入到文本框中，
4 div标签的显示与效果图相似，但样式表及实现原理不同。
至于那个树完全可以用 ul 和 li 的多级嵌套实现，网上有不少例子，LZ 动手搜搜吧！
代码如下， L@_@K：
<body>
<table border= "0 " cellpadding= "0 " cellspacing= "0 ">
<tr>
<td> 所属区域 </td>
<td> <input type= "text " id= "txtRegion " />
<div id= "divRegionList " style= "display: none; border: 1px solid #0000ff; overflow: hidden; height: 150px; position: absolute; background-color: #ff0000; ">
<table width= "100% " border= "0 " cellpadding= "0 " cellspacing= "0 ">
<tr>
<td>
<div style= "overflow: auto; width: 100%; height: 132px; background-color: #90EE90; ">
<ol>
<li> 北京 </li>
<li> 天津 </li>
<li> 上海 </li>
<li> 重庆 </li>
<li> 河北 </li>
<li> 河南 </li>
<li> 山东 </li>
<li> 山西 </li>
<li> 江西 </li>
<li> 江苏 </li>
<li> 浙江 </li>
<li> 内蒙古 </li>
</ol>
</div>
</td>
</tr>
<tr>
<td align= "right " id= "tdClose " style= "cursor: hand; background-color: #ff8888; "> Close </td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
