<html>
<!--函数说明:可输入的下拉框列表改进第二版.
基本参考的阿信的"可输入下拉框第二版",不过将调用接口改进了,并允许用户为控件命名,方便大家在项目中调用.
接口说明:
1: addSelect(obj_id,DefaultValue) 增加空的select控件
参数说明:
obj_id: 控件的id号.
DefaultValue: 缺省值.
2: addOption(value,ID) 增加option列表
参数说明:
value: 下拉列表中每一项的值
ID: 如果存在多个控件,第一个控件的ID值为0,第二个为1,一此类推.
使用说明:将源代码中<style>与</style>之间的代码和<script>与</script>之间的代码拷贝到你需要调用该控件的页面的相应位置.然后在需要显示控件的地方调用上面两个接口.
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>可输入的下拉框改进第二版</title>
<style>
.selectBox{
border-top-color : #7C7C7C;
border-left-color : #7C7C7C;
border-right-color : #D0D0D0;
border-bottom-color : #D0D0D0;
border-top-width: 2px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
.editBox{
border:0px;
width:100%;
cursor:default;
width:100%;
padding-top:2px;
margin-top: 1px;
margin-right: auto;
margin-bottom: 1px;
margin-left: auto;
}
.dropdownbutton{
font-size:12px;
font-family:webdings;
color:#000000;
background-color:#D4D0C8;
margin:1px;
cursor:default;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #E4E4E4;
border-right-color: #7C7C7C;
border-bottom-color: #7C7C7C;
border-left-color: #E4E4E4;
padding-top: 0px;
padding-right: 2px;
padding-bottom: 0px;
padding-left: 2px;
}
.selectContent{
position:absolute;
visibility:hidden;
z-index:1000;
background-color:#FFFFFF;
border: 1px solid #000000;
}
.selectContent tr{cursor:default}
.selectContent td{
font-size:12px;
font-family:Vendana;
padding-top: 2px;
padding-right: 3px;
padding-bottom: 2px;
padding-left: 3px;
}
.OnFocus{color:#FFFFFF;background-color:#0A246A}
</style>
<script language="javascript">
var ZfSelect=[]
var CurrentTR=null
function String.prototype.Trim(){return this.replace(/(^\s*)|(\s*$)/g,'')}//自定义去空格函数Trim()
//在第ID个控件下增加option选项
function addOption(v,ID) {
var i=ID+1;
//var sv=document.all['ZfSelect_'+ID];
if(!v.Trim())
{
return;
}
var tb=document.all['ZfSelect'+i];
// var test = 'ZfSelect' + i;
// var tb = document.all[test];
// alert(tb);
// alert(document.all['ZfSelect'+i]);
//tb.insertRow();
//alert(tb.id);return;
// tb.rows.length 代表有几行数据
var c=tb.insertRow(tb.rows.length).insertCell();
// 下拉列表中的显示值 c.innerHTML
c.innerHTML=v.Trim();
c.onmouseover=new Function("MouseOver(this)");
c.onmouseout=new Function("out(this)");
c.onclick=new Function("MouseClick("+ID+",this)");
//c.className="td_out";
v='';
}
//增加inpnubox的接口,在页面中产生一个inputbox控件,下拉列表为空
function addSelect(name,DefValue) {
var i=getSelCount();
var j=i+1;
//alert("i is:"+i);
var str='<table id="ZfContainer'+j+'" class="selectBox" border="0" width=100 cellspacing=0 cellpadding=0><tr><td><input name="'+name+'" value="'+DefValue+'" class="editBox" onblur="BoxBlur(this)" onclick="DropDown('+i+')" onkeyup="showTip('+i+')" onmouseenter="selectmove()" onmouseout="selMouseOut(this)"></td> <td width="1"><span class="dropdownbutton" onmouseover="ButtonOver(this)" onmouseout="ButtonOut(this)" onclick="DropDown('+i+')">6</span></td> </tr></table>';
document.write(str);
str='<table id="ZfSelect'+j+'" class="selectContent" cellspacing=0 cellpadding=0></table>';
// str='<table id="ZfSelect'+j+'" class="selectContent" cellspacing=0 cellpadding=0> <tr onmouseover="MouseOver(this)" onclick="MouseClick('+i+',this)" title="作者:Andy"> <td>'+name+'</td> </tr></table>';
//alert(str);
document.write(str);
ZfSelect[i]=["ZfContainer"+j,name,"ZfSelect"+j] ;
var s=GetObj(ZfSelect[i][0])
var ZfContainer=GetObj(ZfSelect[i][2])
ZfContainer.style.width=s.offsetWidth>ZfContainer.offsetWidth?s.offsetWidth:ZfContainer.offsetWidth
}
function getSelCount() {
var i=1;
while (eval("document.getElementById('ZfContainer"+i+"')")!=null) i++;
return i-1;
}
function MouseOver(trObj){
if(!CurrentTR)CurrentTR=trObj
CurrentTR.className=""
trObj.className="OnFocus"
trObj.title=trObj.innerText
CurrentTR=trObj;
}
//select 选择框鼠标移开时消失
function selMouseOut(obj)
{
with (document.all.zoom_show)
{
style.display = "none"
}
}
function ButtonOver(BtnObj){
BtnObj.style.backgroundColor='#BAB4A7'
}
function ButtonOut(BtnObj){
BtnObj.style.backgroundColor='#D4D0C8'
}
// 使text显示点击的值
// 点击每一项的时候调用的方法
function piPei(value) {
for(i=0;i<document.form.persontype.length;i++) {
var test = document.form.persontype[i].text;
if(value==test) {
document.form.realValue.value=document.form.persontype[i].value;
}
}
}
function MouseClick(Index,trObj){
with(GetObj(ZfSelect[Index][1])){
value=trObj.innerText; //使text显示点击的值
style.backgroundColor='#0A246A';
style.color='#FFFFFF';
focus();
piPei(value);
for (g=0;g<document.form.persontype.length;g++)
{
//alert("enter...");
if (document.form.persontype.options[g].text==value)
{
value=value
break;
}
}
}
DropDown(Index)
}
function GoURL(trObj){
var url=trObj.getAttribute("url")
if(url&&url!="")window.open(url)
}
// 离开输入框的时候 失去焦点事件
function BoxBlur(InputBox){
with(InputBox.style){backgroundColor="";color=''}
}
// 鼠标单击事件 show为true或者false
// 按下的时候为TRUE，
function DropDown(Index){
event.cancelBubble=true;
ZfContainerReset(Index);
var show=GetObj(ZfSelect[Index][2]).style.visibility=='visible';
GetObj(ZfSelect[Index][2]).style.visibility=show?'hidden':'visible';
setPosition(Index)
}
function document::onclick(){
for(i=0;i<ZfSelect.length;i++){
GetObj(ZfSelect[i][2]).style.visibility='hidden';
with(GetObj(ZfSelect[i][2]))for(j=0;j<rows.length;j++)rows[j].style.display="";
}
}
function window::onresize(){
for(i=0;i<ZfSelect.length;i++)setPosition(i)
}
// 键盘按下的时候掉用的事件
// ZfContainer.rows.length为下拉列表中值的个数 这里为8和2
function showTip(Index){
var inputbox=GetObj(ZfSelect[Index][1])
var ZfContainer=GetObj(ZfSelect[Index][2])
var num=0
ZfContainer.style.visibility="visible"
for(i=0;i<ZfContainer.rows.length;i++){
if(ZfContainer.rows[i].cells[0].innerText.indexOf(inputbox.value)!=0)ZfContainer.rows[i].style.display="none"
else {ZfContainer.rows[i].style.display="";num++}
}
if(num==0)ZfContainer.style.visibility='hidden'
}
function ZfContainerReset(Index){
var ZfContainer=GetObj(ZfSelect[Index][2])
for(i=0;i<ZfContainer.rows.length;i++)
{
ZfContainer.rows[i].style.display=""
}
if(CurrentTR)CurrentTR.className=""
}
// 公用方法
function setPosition(Index){
var s=GetObj(ZfSelect[Index][0])
var ZfContainer=GetObj(ZfSelect[Index][2])
var l=s.offsetLeft;
var t=s.offsetTop;
while(s=s.offsetParent){l+=s.offsetLeft;t+=s.offsetTop}
with(ZfContainer.style){left=l+1;top=t+GetObj(ZfSelect[Index][0]).offsetHeight}
}
// 得到一个对象
function GetObj(id){
return document.getElementById(id)
}
// 鼠标进入该区域的时候调用的事件
// r.text为列表的显示值
function selectmove()
{
var r
if(window.event.srcElement.isTextEdit) {
r=window.event.srcElement.createTextRange();
}else{
var el=window.event.srcElement.parentTextEdit;
//var el=window.event.srcElement.persontype.options[form1.persontype.selectedIndex]
r=el.createTextRange();
}
r.moveToPoint(window.event.x, window.event.y);
r.expand("word");
;
var str = r.text;
if(str.length > 0 ) {
with(zoom_show.style) {
display = "";
top = event.y + 10;
left = event.x + 10;
}
zoom_show.innerText = str;
} else {
zoom_show.style.display = "none";
}
}
function bodyclick()
{
//alert(name1.value);
}
function fuzhi() {
document.form.realValue.value = document.form.persontype.options[o].value;
}
function clickForSubmit()
{
var tempValue=document.all["realValue"].value;
document.location.href="select.html?vaues='"+tempValue+"'";
}
</script>
</head>
<body onclick="bodyclick()">
<PRE></PRE>
<table>
<form name="form" action="select.html" >
<div id="zoom_show" style="font-size:12px;color:red;display:none;position:absolute; z-index:2; top:200;background-color: #F7F7F7; layer-background-color: #0099FF; border: 1px #9c9c9c solid;filter:Alpha(style=0,opacity=80,finishOpacity=100);"></div>
<tr>
<td><select name="persontype" style="display:none;">
<option value='-1'>全部</option>
<option value='1000'>运输干部运输干部运输干部运输干部运输干部运输干部运输干部</option>
<option value='1001'>车辆驾驶员</option>
<option value='1002'>车辆修理工</option>
<option value='1003'>船艇机电工</option>
<option value='1004'>油料员</option>
<option value='1005'>我自己</option>
</select></td>
<tr>
<script language="javascript">
addSelect("name1","");
for (g=0;g<document.form.persontype.length;g++)
{
addOption(document.form.persontype[g].text,0);
}
</script>
<input type="text">
<br>
<select name="persontypssse">
<option value='-1'>全部</option>
<option value='1000'>运输干部运输干部运输干部运输干部运输干部运输干部运输干部</option>
<option value='1001'>车辆驾驶员</option>
<option value='1002'>车辆修理工</option>
<option value='1003'>船艇机电工</option>
<option value='1004'>油料员</option>
<option value='1005'>我自己</option>
</select>
<br><br><br><br>
<input type="hidden" name="realValue" value="">
<input type="button" value=" 点击提交 " onClick="clickForSubmit();">
</form>
</table>
</body>
</html>
本Blog纯属个人学习、工作需要，记录相关资料。请不要发表任何有人身攻击的言论，谢谢！ www.zhipsoft.cn
posted on 2007-05-28 15:05
ZhipSoft 阅读(6431)
评论(3) 编辑 收藏 所属分类:
JavaScript