Editable drop-down box one,
<div style= "position:relative;" >
<select style= "width:120px", "onchange=" document.getElementById (' input '). Value=this.value " >
<option value= "Class A" >a </option>
<option value= Category "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 two,
<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 drop-down 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]; /* toConvert drop-down box */ } /* 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&NBSP;-&NBSP;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 drop-down frame */ } 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 drop-down 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 */ var inputbox = document.getelementsbyname for the drop-down box (" Combox_ " + this.name) [0] inputbox.value = this.select.options [This.select.selectedindex].text; with (InputBox) { select (); focus () }; } ////////Object event End/////// /* Common locator 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.ini T () </script>
</body>
2 ways to implement the editable drop-down box _javascript Tips _