Editable Drop-down Box-html
Copy Code code as follows:
<div style= "position:relative;" >
<select style= "width:120px onchange=" document.getElementById (' input '). Value=this.value ">
<option value= "Class A" >a </option>
<option value= "Class B" >b </option>
<option value= category "Class C" >c </option>
<option value= category "Class D" >d </option>
</select>
<input id= "Input" name= "input" style= "Position:absolute;width:99px;height:16px;left:1px;top:2px;border-bottom : 0px;border-right:0px;border-left:0px;border-top:0px; " >
</div>
Editable Drop-down Box-js
Copy Code code as follows:
<meta name= "generator" content= "Microsoft FrontPage 5.0" >
<meta name= "ProgId" content= "FrontPage.Editor.Document" >
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
<title> Editable Drop-down Box </title>
<body>
<table style= "border:2px outset;background-color: #d2e8FF" width= "", "height=" align= "Center" >
<tr>
<TD width= "60%" height= "align=" "Center" >
<select name= "Fason" >
<option value= "Editable dropdown box" > Editable drop-down box </option>
<option value= "Author" > Author </option>
</select>
</td>
</tr>
</table>
<script language= "JavaScript" >
function Combox (obj,select) {
This.obj=obj
This.name=select;
This.select=document.getelementsbyname (select) [0];
/* The dropdown box to convert * *
}
/* Initialize Object/*
Combox.prototype.init=function () {
var inputbox= "<input name= ' combox_" +this.name+ "' onchange= '" +this.obj+ ". Find () '"
inputbox+= "style= ' position:absolute;width:" + (this.select.offsetwidth-16) + "; Height:" +this.select.offsetheight+ " ; Left: "+getl (This.select) +"; Top: "+gett (this.select) +" ' > "
document.write (InputBox)
With (This.select.style) {
Left=getl (This.select)
Top=gett (This.select)
position= "Absolute"
clip= "Rect (0" + (this.select.offsetWidth) + "" +this.select.offsetheight+ "" + (THIS.SELECT.OFFSETWIDTH-18) + ")"
/* Cut down box * *
}
This.select.onchange=new Function (this.obj+ ". Change ()")
This.change ()
}
/* Initialization End/*
Object Event Definition///////
Combox.prototype.find=function () {
* * When the value of the input box is searched, the dropdown box is automatically positioned.
var inputbox=document.getelementsbyname ("Combox_" +this.name) [0]
With (This.select) {
for (i=0;i<options.length;i++)
if (Options[i].text.indexof (inputbox.value) ==0) {
Selectedindex=i
This.change ();
Break
}
}
}
Combox.prototype.change=function () {
/* Defines the onchange event for the dropdown box.
var inputbox=document.getelementsbyname ("Combox_" +this.name) [0]
Inputbox.value=this.select.options[this.select.selectedindex].text;
With (InputBox) {select (), focus ()};
}
Object Event End///////
/* Public positioning function (get control absolute coordinates) * *
function Getl (e) {
var l=e.offsetleft;
while (e=e.offsetparent) L+=e.offsetleft;
return L
}
function Gett (e) {
var t=e.offsettop;
while (e=e.offsetparent) t+=e.offsettop;
Return T
}
/* END * *
</script>
<script language= "JavaScript" >
var a=new combox ("A", "Fason")
A.init ()
</script>
</body>