本人在做一个.net网站时,后台的文章要添加多个关键字,这些关键字要能在后台设定,以传统的方法,是用select 下拉菜单实现,这个方式虽然实现很方便,但管理起来感觉就不是很好了,因为关键字很多,所以我就想用JS来实现在文本框下的下拉菜单。实现代码如下:
'add(this)'
<!
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=gb2312" />
< title > 无标题文档 </ title >
< style type ="text/css" > ...
<!--
.tr {...}{
height: 150px;
width: 80px;
border: 1px solid #ededed;
position:absolute;
z-index: 10;
display:none;
background-color:#ffffff;
}
-->
</ style >
</ head >
< body >
< div class ="tr" id ="aa" onclick ="aaa()" >
< div onmouseover =this.style.backgroundColor='#F6F6F6' onmouseout ="this.style.backgroundColor='#ffffff'" style ="cursor:hand;" onclick ='add(this)' > 测试一下 </ div >
< div onmouseover =this.style.backgroundColor='#F6F6F6' onmouseout ="this.style.backgroundColor='#ffffff'" style ="cursor:hand;" onclick ='add(this)' > 测试二下 </ div >
< div onmouseover =this.style.backgroundColor='#F6F6F6' onmouseout ="this.style.backgroundColor='#ffffff'" style ="cursor:hand;" onclick ='add(this)' > 测试三下 </ div >
< div onmouseover =this.style.backgroundColor='#F6F6F6' onmouseout ="this.style.backgroundColor='#ffffff'" style ="cursor:hand;" onclick ='add(this)' > 测试四下 </ div >
</ div >
< input type ="text" name ="textfield" id ="dd" onmouseover ="look('dd')" />
< input type ="text" name ="textfield" id ="dd1" onmouseover ="look('dd1')" />
< script type ="text/javascript" > ...
function look(obj)
...{
a1 = obj
var bb = document.getElementById("aa");
var cc = document.getElementById(obj);
bb.style.top = cc.offsetTop + 40 ;
bb.style.left = cc.offsetLeft + 40 ;
bb.style.display = 'block';
}
function add(obj)
...{
document.getElementById(a1).value= obj.innerText ;
}
function aaa()
...{
document.getElementById("aa").style.display = "none";
}
</ script >
</ body >
</ html >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
< title > 无标题文档 </ title >
< style type ="text/css" > ...
<!--
.tr {...}{
height: 150px;
width: 80px;
border: 1px solid #ededed;
position:absolute;
z-index: 10;
display:none;
background-color:#ffffff;
}
-->
</ style >
</ head >
< body >
< div class ="tr" id ="aa" onclick ="aaa()" >
< div onmouseover =this.style.backgroundColor='#F6F6F6' onmouseout ="this.style.backgroundColor='#ffffff'" style ="cursor:hand;" onclick ='add(this)' > 测试一下 </ div >
< div onmouseover =this.style.backgroundColor='#F6F6F6' onmouseout ="this.style.backgroundColor='#ffffff'" style ="cursor:hand;" onclick ='add(this)' > 测试二下 </ div >
< div onmouseover =this.style.backgroundColor='#F6F6F6' onmouseout ="this.style.backgroundColor='#ffffff'" style ="cursor:hand;" onclick ='add(this)' > 测试三下 </ div >
< div onmouseover =this.style.backgroundColor='#F6F6F6' onmouseout ="this.style.backgroundColor='#ffffff'" style ="cursor:hand;" onclick ='add(this)' > 测试四下 </ div >
</ div >
< input type ="text" name ="textfield" id ="dd" onmouseover ="look('dd')" />
< input type ="text" name ="textfield" id ="dd1" onmouseover ="look('dd1')" />
< script type ="text/javascript" > ...
function look(obj)
...{
a1 = obj
var bb = document.getElementById("aa");
var cc = document.getElementById(obj);
bb.style.top = cc.offsetTop + 40 ;
bb.style.left = cc.offsetLeft + 40 ;
bb.style.display = 'block';
}
function add(obj)
...{
document.getElementById(a1).value= obj.innerText ;
}
function aaa()
...{
document.getElementById("aa").style.display = "none";
}
</ script >
</ body >
</ html >