用层模拟<span>
<input name=iData size=10><input type=button onclick=showSel(true) value=v>
<br/><select id=qswh size=10 style=position:absolute;display:none onchange=selText(iData)>
<option>1
<option>12
<option>123
<option>1234
<option>12345
<option>123456
<option>1234567
<option>12345678
<option>123456789
<option>1234567890
<option>12345678909
<option>123456789098
<option>1234567890987
<option>12345678909876
<option>123456789098765
<option>1234567890987654
<option>12345678909876543
<option>123456789098765432
<option>1234567890987654321
</select>
</span>ttt
<script>
function document.onclick(){
showSel(false)
}
function showSel(flag){
document.all.qswh.style.display=(flag?"block":"none")
window.event.cancelBubble=true;
}
function selText(obj){
obj.value=(document.all.qswh.options[document.all.qswh.selectedIndex].text)
//showSel(false)
}
</script>
<input name=iData size=10><input type=button onclick=showSel(true) value=v>
<br/><select id=qswh size=10 style=position:absolute;display:none onchange=selText(iData)>
<option>1
<option>12
<option>123
<option>1234
<option>12345
<option>123456
<option>1234567
<option>12345678
<option>123456789
<option>1234567890
<option>12345678909
<option>123456789098
<option>1234567890987
<option>12345678909876
<option>123456789098765
<option>1234567890987654
<option>12345678909876543
<option>123456789098765432
<option>1234567890987654321
</select>
</span>ttt
<script>
function document.onclick(){
showSel(false)
}
function showSel(flag){
document.all.qswh.style.display=(flag?"block":"none")
window.event.cancelBubble=true;
}
function selText(obj){
obj.value=(document.all.qswh.options[document.all.qswh.selectedIndex].text)
//showSel(false)
}
</script>
解决方案 »
- 急!求一个用javascript编写一个链接颜色变换的问题
- 高分求清除js脚本
- 如何解析一段string类型的JS语句成单句代码?高手请进!
- [分享]使用js在网页上画图(DrJs)
- 理论上,在javascript代码中,注释符 <!-- --> 会被识别成什么呀?
- 多选radio怎么改变状态?
- 修改系统时间的问题,请高手指点一二。
- 关于层里头的top参数的动态变化(很着急)
- SELECT的一个不错的特征。。
- 如何用Javascript控制打印机走纸?(说情见内)
- 关于execCommand('InsertImage',1)的问题,在线100分等候!
- 求拆分合并表格单元格的函数,并把拆分合并后的表格源码记录下来
可录入,可选择,还可定位
combox.asp
-->
<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">
<title>可输入的下拉框</title>
<style>
button {cursor:hand;border:1px solid blue;font-family:arial;font-size:9pt;}
.combo-button {
cursor: pointer;
cursor: expression("hand");
height: 20px;
border: 1px solid green;
background: rgb(234,242,255);
width: 14px;
}
.combo-hilite {
cursor: pointer;
cursor: expression("hand");
background: rgb(234,242,255);
border: 1px solid rgb(255,255,255);
color: blue;
font-family: verdana;
font-size: 9pt;
}
.combo-item {
cursor: pointer;
cursor: expression("hand");
background: white;
border: 1px solid white;
color: black;
font-family: verdana;
font-size: 9pt;
}.combo-input {
border: 1px solid green !important;
width: 138px !important;
}.combo-list-width {
width:153px
}.combo-list {
border: 1px solid green;
width: 153px;
/*height: 200px;
overflow-y: auto;
scrollbar-base-color: rgb(234,242,255);
scrollbar-highlight-color: rgb(234,242,255);
scrollbar-3dlight-color: rgb(0,0,0);
scrollbar-darkshadow-color: rgb(255,255,255);
scrollbar-shadow-color: rgb(234,242,255);
scrollbar-face-color: rgb(234,242,255);
scrollbar-track-color: white;
scrollbar-arrow-color: black;*/
}
</style></head><body>
<script>
Global_run_event_hook = true;
Global_combo_array = new Array();
Global_ie = document.all != null;//这句的意思是说给Array数组对象添加一个remove方法
//这个方法的处理函数就是后面的函数,这种不直观,你看下后面我写的那个,你就更明白了
/*
Array.prototype.remove=Array_remove;
function Array_remove(dx) //???这句的作用,请讲解一下它的方法及属性
{
if(isNaN(dx)||dx>this.length){self.status='Array_remove:invalid request-'+dx;return false}
for(var i=0,n=0;i<this.length;i++)
{
if(this[i]!=this[dx])
{
this[n++]=this[i]
}
}
this.length-=1
}
//看了上面的,是不是更直观,再看下MSDN上的方法,另外再自己调试一下MSDN里的DEMO的,一看就明白。
//http://msdn.microsoft.com/library/default.asp?url=/library/en-us/script56/html/js56jsproprototype.asp
*///这句的作用是跟下面的ComboBox对象中的remove对应的。它里面调用了数组对象的remove这个自定义的方法,下面相对应处作了标志
Array.prototype.remove=function(dx) //???这句的作用,请讲解一下它的方法及属性
{
if(isNaN(dx)||dx>this.length){self.status='Array_remove:invalid request-'+dx;return false}
for(var i=0,n=0;i<this.length;i++)
{
if(this[i]!=this[dx])
{
this[n++]=this[i]
}
}
this.length-=1
}function ComboBox_make()
{
var bt,nm;
nm = this.name+"txt";
this.txtview = document.createElement("INPUT") //???这句的作用,请讲解一下它的方法及属性
//createElement方法是创建一个标志元素,也就是HTML里的标志了,如<table>、<tr>等类,用这种方法可以在JS里自动去创建一个标志的
//学会看MSDN的,有问题去查资料,MSDN是每一个程序员应该学会用的
//下面是这个方法的资料,自己去看用法,后面的地址都是方法对应的MSDN地址
//http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/methods/createelement.asp
this.txtview.type = "text";
this.txtview.name = nm;
this.txtview.id = nm;
this.txtview.className = "combo-input"
this.view.appendChild(this.txtview); //???这句的作用,请讲解一下它的方法及属性
//appendChild方法,是把一个标志元素添加进另一个标志元素里,这里的意思是把一个input标志添加进div标志里
//如:开始this.view为:<div></div>
//this.txtview为:<input type=text value=1>
//则调用这个方法过后,this.view为:<div><input type=text value=1 id=text1 name=text1></div>
//明白了吧?再不明白,你非典去吧!
//http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/methods/appendChild.asp
this.valcon = document.createElement("INPUT");
this.valcon.type = "hidden";
this.view.appendChild(this.valcon)
var tmp = document.createElement("IMG");
tmp.src = "___";
tmp.style.width = "1px";
tmp.style.height = "0";
this.view.appendChild(tmp);
var tmp = document.createElement("BUTTON");
tmp.className = "combo-button";
if(Global_ie){tmp.innerHTML = '<span style="font-family:webdings;font-size:8pt">6</span>';}
else{tmp.style.height='24px'}
this.view.appendChild(tmp);
if(Global_ie)
{
tmp.onfocus = function ()
{
this.blur();
};
}
tmp.onclick = new Function ("", this.name + ".toggle()");
}
{
this.value = realval;
var samstring = this.name+".view.childNodes[0].value='"+txtval+"'"
//alert(samstring)
window.setTimeout(samstring,1)
//this.view.childNodes[0].value = txtval;
this.valcon.value = realval;
}function ComboBox_mouseDown()
{
var obj,len,el,i;
el = window.event.srcElement
elcl = el.className
if(elcl.indexOf("combo-")!=0)
{
len=Global_combo_array.length
for(i=0;i<len;i++)
{
curobj = Global_combo_array[i]
if(curobj.opslist)
{
curobj.opslist.style.display='none'
}
}
}
}function ComboBox_handleKey()
{
var key,obj,eobj,el,strname;
eobj = window.event;
key = eobj.keyCode;
el = eobj.srcElement
elcl = el.className
if(elcl.indexOf("combo-")==0)
{
if(elcl.split("-")[1]=="input")
{
strname = el.id.split("txt")[0]
// erik modify //jared modify
//obj = window.eval(el.id.split("txt")[0])//obj = window[el.id.split("txt")[0]];
obj = window[strname];
// end erik //end jared
obj.expops.length=0
obj.update();
obj.build(obj.expops);
if(obj.expops.length==1&&obj.expops[0].text=="(No matches)"){}//empty
else{obj.opslist.style.display='block'}
obj.value = el.value;
obj.valcon.value = el.value;
}
}
}function ComboBox_update()
{
var opart,astr,alen,opln,i,boo;
boo=false;
opln = this.options.length
astr = this.txtview.value
alen = astr.length
if(alen==0)
{
for(i=0;i<opln;i++)
{
this.expops[this.expops.length]=this.options[i];boo=true;
}
}
else
{
for(i=0;i<opln;i++)
{
opart=this.options[i].text.substring(0,alen)
if(astr==opart)
{
this.expops[this.expops.length]=this.options[i];boo=true;
}
}
}
if(!boo){this.expops[0]=new ComboBoxItem("(No matches)","")}
}
function ComboBox_remove(index)
{
//这句的作用是跟下面的ComboBox对象中的remove对应的。它里面调用了数组对象的remove这个自定义的方法,下面相对应处作了标志
//这句是和上面的数组对象进行自定义一个方法REMOVE对应的,调用这个方法里,自动转交给上面的那个function处理.
//这样做的目的就是,把所有的东西都对象化了。一个面向对象的编程。OOP方法,知道吧!
this.options.remove(index)
}function ComboBox_add()
{
var i,arglen;
arglen=arguments.length
for(i=0;i<arglen;i++)
{
this.options[this.options.length]=arguments[i]
}
}function ComboBox_build(arr)
{
var str,arrlen
arrlen=arr.length;str=''
str +='<table class="combo-list-width" cellpadding=0 cellspacing=0>'
//str +='<table cellpadding=0 style="width:153" cellspacing=0>'
for(var i=0;i<arrlen;i++)
{
str += '<tr>'
str += '<td class="combo-item" onClick="'+this.name+'.choose(\''+arr[i].value+'\',\''+arr[i].text+'\');'+this.name+'.opslist.style.display=\'none\';"'
str += 'onMouseOver="this.className=\'combo-hilite\';" onMouseOut="this.className=\'combo-item\'" > '+arr[i].text+' </td>'
str +='</tr>'
}
str +='</table>'
if(this.opslist){this.view.removeChild(this.opslist);}
this.opslist = document.createElement("DIV")
this.opslist.innerHTML=str;
this.opslist.style.display='none';
this.opslist.className="combo-list"
this.opslist.onselectstart=returnFalse;
this.view.appendChild(this.opslist);
}function ComboBox_toggle()
{
if(this.opslist)
{
if(this.opslist.style.display=="block")
{
this.opslist.style.display="none"
}
else
{
this.update();
this.build(this.options);
this.view.style.zIndex = ++ComboBox.prototype.COMBOBOXZINDEX
this.opslist.style.display="block"
}
}
else
{
this.update();
this.build(this.options);
this.view.style.zIndex = ++ComboBox.prototype.COMBOBOXZINDEX
this.opslist.style.display="block"
}
}
//这是一个对象类,与普通函数有区别,注意,类同下面详细说的那个comboboxitem类,见后面.这个程序主要的地方就是这个类,
function ComboBox()
{
if(arguments.length==0)
{
self.status="ComboBox invalid - no name arg"
} this.name = arguments[0];
this.par = arguments[1]||document.body
this.view = document.createElement("DIV");
this.view.style.position='absolute';
this.options = new Array();
this.expops = new Array();
this.value = "" this.build = ComboBox_build
this.make = ComboBox_make;
this.choose = ComboBox_choose;
this.add = ComboBox_add;
this.toggle = ComboBox_toggle;
this.update = ComboBox_update;
this.remove = ComboBox_remove; this.make()
this.txtview = this.view.childNodes[0]
this.valcon = this.view.childNodes[1]
this.par.appendChild(this.view)
/*
var span = document.createElement("SPAN");
span.style.width = "152px";
this.view.parentNode.insertBefore(span, this.view); //???这句的作用,请讲解一下它的方法及属性,还有参数。
//这里表示在this.view属性指向的标志元素之前添加一个SPAN标志元素
//下面的MSDN里的例子很直观,点那个SHOWME按钮就可以看到
//http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/methods/insertBefore.asp */
Global_combo_array[Global_combo_array.length]=this;
if(Global_run_event_hook){ComboBox_init()}
}
ComboBox.prototype.COMBOBOXZINDEX = 1000 //change this if you mustfunction ComboBox_init()
{ document.body.attachEvent("onkeyup",ComboBox_handleKey)//???这句的作用,请讲解一下它的方法及属性
//这里表示,把 当前页面的body中的onkeyup事件与ComboBox_handleKey关联起来,就相当于说如果当前文件发生按键被弹起,就触发这个事件时,交由ComboBox_handleKey外理,下面同样,是MOUSE被按下时
///http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/methods/attachEvent.asp
//下面的英文很清晰了,给一个事件绑定一个指定的函数进行处理这个事件。
//Binds the specified function to an event, so that the function gets called whenever the event fires on the object.
document.body.attachEvent("onmousedown",ComboBox_mouseDown)
Global_run_event_hook = false;
}function returnFalse(){return false}//这里ComboBoxItem是一个自定义的类,它有两个属性text和value,不要把它看成普通的函数,要看成类,它是这个类的构造函数,JS里类与C++的方式不同.
function ComboBoxItem(text,value)
{
this.text = text;//THIS是指向当前类的对象的指针,与C++的相似,这里说明了一个该类的一个属性text,下同
this.value = value;
}
</script>
<script>dm=new ComboBox("dm")
y=new Array()
y[1]=new ComboBoxItem("x",1),
x=new ComboBoxItem("x",1),dm.add( //???这里为何为能使用循环,我想调入数据表内的内容。
x,
new ComboBoxItem("1",1),
new ComboBoxItem("2",2),
new ComboBoxItem("3",3),
new ComboBoxItem("4",4),
new ComboBoxItem("1",1),
new ComboBoxItem("2",2),
new ComboBoxItem("3",3),
new ComboBoxItem("4",4),
new ComboBoxItem("5",5),
new ComboBoxItem("1",1),
new ComboBoxItem("2",2),
new ComboBoxItem("3",3),
new ComboBoxItem("4",4),
new ComboBoxItem("5",5)
)//这是用循环的方法
for (i=0;i<10;i++) //用这种方法可以用数组
{
dm.add(new ComboBoxItem(i,i));//实际上ADD方法它每次添加是一个数组的,这里ComboBoxItem是一个自定义的对象,它有两个属性text和value
//这里的ADD方法是ComboBox类自定义的一个方法,它调用的是ComboBox_Add()函数,注意到没有?
}
dm.remove(new ComboBoxItem("x",5));
//你的这句有问题
//你注意到没有
//应该传进去index的
//正确的应该是 dm.remove(1);
//试试</script>
</body>//上面应该是你想要的,
你组织起来吧