<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="dtree.css" />
<script language="javascript" type="text/javascript" src="dtree.js"></script>
<title>select树例子,dtree实现树目录,div模拟select标签</title>
</head>
<body>
<center>
<br/><br/><br/><br/>
<select id="selCity" name="selCity" onchange="selTest()">
<option value="0">--请选择城市--</option>
<option value="010">北京</option>
<option value="021">上海</option>
<option value="022">天津</option>
<option value="023">重庆</option>
<option value="028">成都</option>
</select>
<script language="javascript" type="text/javascript">
function selTest()
{
var city = document.getElementById("selCity");
alert(city.options[city.selectedIndex].text);
}
</script>
<br/><br/><br/>
<div id="divSelTitle" style="width:152px; height:20px; z-index:1; vertical-align:middle">
<input type="text" id="txtSel" name="txtSel" onclick="showSel()" size="17" value="--请选择所在地区--" readonly="readonly" style="vertical-align:middle"/><img src="sel.jpg" id="imgSel" name="imgSel" style="vertical-align:middle" onclick="showSel()"/>
</div>
<div id="divSel" style="width:150px; height:300px; background-color:#FFFFFF; border:thin; border-style:solid; border:1px; z-index:2; margin-top:0px; margin-left:0px; margin-bottom:0px; margin-right:0px; padding-top:0px; padding-left:0px; padding-bottom:0px; padding-right:0px; display:none; overflow:auto;" align="left">
</div>
<script language="javascript" type="text/javascript">
//dtree生成的树型目录
d = new dTree('d');
d.add(0,-1,'中华人民共和国');
d.add(1,0,'四川省',"");
d.add(2,0,'北京市',"javascript:getSelect(2,'北京市')");
d.add(3,1,'自贡市',"");
d.add(4,0,'上海市',"javascript:getSelect(4,'上海市')");
d.add(5,3,'富顺县',"");
d.add(6,5,'赵化镇',"javascript:getSelect(6,'赵化镇')");
d.add(7,0,'重庆市',"javascript:getSelect(7,'重庆市')");
d.add(8,1,'成都市',"javascript:getSelect(8,'成都市')");
d.add(9,0,'浙江省',"javascript:getSelect(9,'浙江省')",'Pictures I\'ve taken over the years','','','img/imgfolder.gif');
d.add(10,9,'杭州市',"javascript:getSelect(10,'杭州市')",'Pictures of Gullfoss and Geysir');
d.add(11,9,'金华市',"javascript:getSelect(11,'金华市')");
d.add(12,0,'其它地区',"javascript:getSelect(12,'其它地区')",'','','img/trash.gif');
//div模拟的select标签
var count = 0;
var divGrowTime;
function showSel()
{
var divTemp = document.getElementById("divSel");
if(divTemp.style.display == "none")
{
if(count <= 0)
{
divTemp.style.display = "block";
divTemp.style.height = 0;
divGrowTime = window.setInterval("divGrow()",1);
}
return;
}
if(divSel.style.display == "block")
{
if(count >= 300)
{
//dom动态移出树型目录
//document.getElementById("divSel").innerHTML = "";
//divCloseTime = window.setInterval("divClose()",1);
count = 0;
document.getElementById("divSel").style.display = "none";
document.getElementById("txtSel").focus();
}
return;
}
}
function divGrow()
{
count = count + 15;
document.getElementById("divSel").style.height = count;
if(count >= 300)
{
window.clearInterval(divGrowTime);
count = 300;
//dom动态装载树型目录
document.getElementById("divSel").innerHTML = d;
}
}
function divClose()
{
count = count - 15;
document.getElementById("divSel").style.height = count;
if(count <= 0)
{
window.clearInterval(divCloseTime);
count = 0;
document.getElementById("divSel").style.display = "none";
}
}
function getSelect(number,name)
{
var txtSel = document.getElementById("txtSel");
txtSel.value = name;
if(document.getElementById("divSel").style.display == "block")
{
//txt.Sel.value.match(/^\*$/)是用match方法判断文本框是否输入了空符串或空格,里面是正则表达式
if(count >= 300 && txtSel.value.match(/^\*$/) != false)
{
//dom动态移出树型目录
//document.getElementById("divSel").innerHTML = "";
//divCloseTime = window.setInterval("divClose()",10);
count = 0;
document.getElementById("divSel").style.display = "none";
document.getElementById("txtSel").focus();
}
}
return;
}
</script>
</center>
</body>
</html>
select树dtree和div实现
5星 · 超过95%的资源 需积分: 50 45 浏览量
2010-01-31
13:27:10
上传
评论 1
收藏 14KB RAR 举报 
select树.rar （24个子文件） 
sel.jpg 889B
dtree.css 795B
img 
nolines_plus.gif 870B plusbottom.gif 88B plus.gif 89B empty.gif 62B line.gif 66B imgfolder.gif 622B joinbottom.gif 66B trash.gif 1KB folderopen.gif 376B globe.gif 1KB minus.gif 86B minusbottom.gif 85B base.gif 1KB musicfolder.gif 633B join.gif 69B question.gif 1KB nolines_minus.gif 861B page.gif 582B cd.gif 239B folder.gif 372B dtree.js 12KB
select.html 4KB
- 1
- 2
前往页