As mentioned above, the infinite linkage drop-down menu for editing and specifying select is required. I will first write an editable drop-down box class, which will be written in the next article.
In the Editable drop-down box on the Internet, more than two locations are used to display the problem. So I fixed the problem and wrote the following content.
To put it bluntly, the Editable drop-down box adds an input to the SELECT statement. Below is an editable drop-down box class (combox. JS ):
/**
* Editable drop-down box object class
*
* The editable drop-down box is actually a borderless input box on the drop-down box. when data is input in the input box, the drop-down box is automatically located,
* When an item is selected in the drop-down box, the value of the drop-down box is assigned to the input box, which leads to the illusion
*
* @ Author zxub 2005-8-22
*/
Function combox (_ inpuobjname, _ controlselectname)
{
// Name of the generated input box object
This. inpuobjname = _ inpuobjname;
// Generated input box object
This. inputbox = NULL;
// Original drop-down box object
This. controlselect = Document. getelementbyid (_ controlselectname );
// Initialize the object
// _ Comboxobj: combox object, which must point to itself
This. init = function (_ comboxobj)
{
This. inputbox = Document. createelement ("input ");
This. inputbox. ID = This. inpuobjname;
This. inputbox. comboxobj = _ comboxobj;
This. inputbox. onchange = function ()
{
This. comboxobj. Find ();
}
With (this. inputbox. Style)
{
Width = This. controlselect. offsetWidth-16;
Height = This. controlselect. offsetheight;
}
This. controlselect. insertadjacentelement ("beforebegin", this. inputbox );
_ Span = Document. createelement ("span ");
_ Span. style. width = 18;
This. controlselect. insertadjacentelement ("beforebegin", _ span );
_ Span. appendchild (this. controlselect );
_ Container = Document. createelement ("span ");
This. inputbox. insertadjacentelement ("beforebegin", _ container );
_ Container. appendchild (this. inputbox );
_ Container. appendchild (_ span );
_ Container. style. width = This. inputbox. offsetwidth + 18;
_ Width = This. controlselect. offsetWidth-18;
With (this. controlselect. Style)
{
Margin = "0 0 0-" + _ width;
}
This. controlselect. comboxobj = _ comboxobj;
This. controlselect. onchange = function ()
{
This. comboxobj. Change ();
}
This. Change ();
}
// When the value of the input box is found, the drop-down box is automatically located/
This. Find = function ()
{
With (this. controlselect)
{
For (I = 0; I <options. length; I ++)
If (options [I]. Text. indexof (this. inputbox. Value) = 0)
{
Selectedindex = I;
This. Change ();
Break;
}
}
}
// Define the onchange event in the drop-down box
This. Change = function ()
{
This. inputbox. value = This. controlselect. Options [This. controlselect. selectedindex]. text;
With (this. inputbox)
{
Select ();
Focus ();
}
}
}
/**
* Positioning function to obtain the absolute coordinates of the control
*/
Function getleftpos (E)
{
VaR left = E. offsetleft;
While (E = E. offsetparent)
{
Left + = E. offsetleft;
}
Return left;
}
Function gettoppos (E)
{
VaR Top = E. offsettop;
While (E = E. offsetparent)
{
Top + = E. offsettop;
}
Return top;
}
Attached test page test.htm:
<! Doctype HTML public "-// W3C // dtd html 4.0 transitional // en">
<HTML>
<Head>
<Title> new document </title>
<Meta name = "generator" content = "editplus">
<Meta name = "author" content = "">
<Meta name = "keywords" content = "">
<Meta name = "Description" content = "">
<Script language = "JavaScript" src = "combox. js"> </SCRIPT>
</Head>
<Body>
<Table border = "1" style = "border-collapse: collapse">
<Tr>
<TD width = "300"> <select name = test1>
<Option value = "editable drop-down box 1" selected> editable drop-down box 1 </option>
<Option value = "1"> 1 </option>
<Option value = "2"> 2 </option>
<Option value = "3"> 3 </option>
</SELECT>
<Input type = "button" value = "get the value of edit box 1" onclick = "alert (document. getelementbyid ('username'). Value)">
</TD>
<TD width = "109"> <select name = Test2>
<Option value = "editable drop-down box 2"> editable drop-down box 25555555 </option>
<Option value = "1"> 4 </option>
<Option value = "2" selected> 5 </option>
<Option value = "3"> 6 </option>
</SELECT>
</TD>
& Lt; TD width = "343" & gt;
<Input type = "button" value = "get the value of edit box 2" onclick = "alert (document. getelementbyid ('Password'). Value)">
</TD>
</Tr>
</Table>
<Script language = "JavaScript">
VaR A = new combox ("username", "test1 ");
// Parameter 1 is the name of the newly generated input box
// Parameter 2 is the name of the original select object
A. INIT ();
VaR B = new combox ("password", "Test2 ");
B. INIT (B );
</SCRIPT>
</Body>
</Html>
OK. In the next article, I will explain how to create an infinitely linked drop-down menu with editable and specified select statements.
