JS下拉框

最新推荐文章于 2024-04-18 17:52:13 发布

lg_Mp5

最新推荐文章于 2024-04-18 17:52:13 发布

阅读量951

点赞数

分类专栏： WEB开发文章标签： dropdown function null border class javascript

本文链接：https://blog.csdn.net/lg_mp5/article/details/772011

版权

WEB开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<html>
<BODY>
<SELECT NAME="s1"><option>需要JavaScript才能正确显示</SELECT>
<SELECT NAME="s2"></SELECT>
<SELECT NAME="s3"></SELECT>
<SELECT NAME="s4"></SELECT>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</BODY>
</HTML>

//第二个
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta name="Author" content="阿信,fason">
<meta name="KeyWords" content="下拉框,输入,阿信,fason">
<title>漂亮下拉框</title>
<style>
.selectBox{border:1px solid #993300;height:20px;}
.editBox{border:0px;width:100px;cursor:default;width:100%;height:19px;padding-top:2px;margin:1px}
.dropdownbutton{font-size:12px;font-family:webdings;color:#CCFF66;height:20px;background-color:#993300;border:1px solid #993300;padding:0 2;margin:1px;cursor:default}
.selectContent{position:absolute;border:1px solid #993300;visibility:hidden;z-index:1000;background-color:#FFFFFF}
.selectContent tr{height:20px;cursor:default}
.selectContent td{font-size:12px;font-family:Vendana;padding:2 3}
.OnFocus{color:#FFFFFF;background-color:#993300}
</style>
<script language="javascript">
var CoolSelect=[]
var CurrentTR=null
function MouseOver(trObj){
if(!CurrentTR)CurrentTR=trObj
CurrentTR.className=""
trObj.className="OnFocus"
CurrentTR=trObj;
}

function ButtonOver(BtnObj){
BtnObj.style.backgroundColor='#cc3300'
}
function ButtonOut(BtnObj){
BtnObj.style.backgroundColor='#993300'
}
function MouseClick(Index,trObj){
with(GetObj(CoolSelect[Index][1])){
value=trObj.innerText;
style.backgroundColor='#993300'
style.color='#FFFFFF'
focus()
}
DropDown(Index)
}
function GoURL(trObj){
var url=trObj.getAttribute("url")
if(url&&url!="")window.open(url)
}
function BoxBlur(InputBox){
with(InputBox.style){backgroundColor="";color=''}
}
function DropDown(Index){
event.cancelBubble=true
ContainerReset(Index)
var show=GetObj(CoolSelect[Index][2]).style.visibility=='visible'
GetObj(CoolSelect[Index][2]).style.visibility=show?'hidden':'visible'
setPosition(Index)
}
function document::onclick(){
for(i=0;i<CoolSelect.length;i++){
GetObj(CoolSelect[i][2]).style.visibility='hidden'
with(GetObj(CoolSelect[i][2]))for(j=0;j<rows.length;j++)rows[j].style.display=""
}
}
function window::onresize(){
for(i=0;i<CoolSelect.length;i++)setPosition(i)
}

function showTip(Index){
var inputbox=GetObj(CoolSelect[Index][1])
var container=GetObj(CoolSelect[Index][2])
var num=0
container.style.visibility="visible"
for(i=0;i<container.rows.length;i++){
if(container.rows[i].cells[0].innerText.indexOf(inputbox.value)!=0)container.rows[i].style.display="none"
else {container.rows[i].style.display="";num++}
}
if(num==0)container.style.visibility='hidden'
}
function ContainerReset(Index){
var container=GetObj(CoolSelect[Index][2])
for(i=0;i<container.rows.length;i++)container.rows[i].style.display=""
if(CurrentTR)CurrentTR.className=""
}
function setPosition(Index){
var s=GetObj(CoolSelect[Index][0])
var container=GetObj(CoolSelect[Index][2])
var l=s.offsetLeft;
var t=s.offsetTop;
while(s=s.offsetParent){l+=s.offsetLeft;t+=s.offsetTop}
with(container.style){left=l+1;top=t+GetObj(CoolSelect[Index][0]).offsetHeight}
}
function Init(){
CoolSelect[0]=["ConTainer1","txt1","select1"]
CoolSelect[1]=["ConTainer2","txt2","select2"]
for(i=0;i<CoolSelect.length;i++){
var s=GetObj(CoolSelect[i][0])
var container=GetObj(CoolSelect[i][2])
container.style.width=s.offsetWidth>container.offsetWidth?s.offsetWidth:container.offsetWidth
setPosition(i)
}
}
function GetObj(id){return document.getElementById(id)}
</script>
</head>
<body οnlοad="Init()">
<div align="center">
<table style="width:250;border:2px solid groove;font-size:12px" border=1 cellspacing=0 cellpadding=0>
<tr bgcolor="green" style="font-weight:bold;color:#FFFFFF">
<td>输入，提示功能示例</td><td>菜单跳转示例</td>
</tr>
<tr>
<td>
<table id="Container1" class="selectBox" border="0" width=100 cellspacing=0 cellpadding=0>
<tr>
<td><input name="txt1" value=" 请选择 " class="editBox" οnblur="BoxBlur(this)" οnclick="DropDown(0)" οnkeyup="showTip(0)"></td>
<td width="1"><span class="dropdownbutton" οnmοuseοver="ButtonOver(this)" οnmοuseοut="ButtonOut(this)" οnclick="DropDown(0)">6</span></td>
</tr>
</table>
</td>
<td>
<table id="Container2" class="selectBox" border="0" cellspacing=0 cellpadding=0>
<tr>
<td><input name="txt2" readOnly=true value=" 请选择 " class="editBox" οnblur="BoxBlur(this)" οnclick="DropDown(1)" οnkeyup="showTip(1)"></td>
<td width="1"><span class="dropdownbutton" οnmοuseοver="ButtonOver(this)" οnmοuseοut="ButtonOut(this)" οnclick="DropDown(1)">6</span></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<table id="select1" class="selectContent" cellspacing=0 cellpadding=0>
<tr οnmοuseοver="MouseOver(this)" οnclick="MouseClick(0,this)" title="作者:Andy">
<td>一起走过的日子</td>
</tr>
<tr οnmοuseοver="MouseOver(this)" οnclick="MouseClick(0,this)" title="作者:Andy">
<td>你是我的温柔</td>
</tr>
<tr οnmοuseοver="MouseOver(this)" οnclick="MouseClick(0,this)" title="作者:Andy">
<td>你是我的女人</td>
</tr>
</table>
<table id="select2" class="selectContent" cellspacing=0 cellpadding=0>
<tr οnmοuseοver="MouseOver(this)" οnclick="MouseClick(1,this);GoURL(this)" url=" http://expert.csdn.net/exp...
<td>CSDN论坛</td>
</tr>
<tr οnmοuseοver="MouseOver(this)" οnclick="MouseClick(1,this);GoURL(this)" url=" http://msdn.microsoft.com/...
<td>MSDN参考</td>
</tr>
<tr οnmοuseοver="MouseOver(this)" οnclick="MouseClick(1,this);GoURL(this)" url=" http://www.iecn.net"&...
<td>IECN论坛</td>
</tr>
</table>
</body>
</html>

lg_Mp5

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS下拉框

需要JavaScript才能正确显示 //选择框的名字 selector = [ "s1", "s2", "s3", "s4" ]; //选择项: "名字", "值", 子选择 menu = [ "地球","1", [ "中
复制链接

扫一扫