This article illustrates the practical method of JS+CSS Click the Input Box pop-up selection box. Share to everyone for your reference. The implementation methods are as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<TITLE>JS+CSS Create a practical click on the Input Box pop-up selection box effect </title>
<style type= "Text/css" >
. Black_overlay{display:none;position:absolute;top:0%;left:0%;width:100%;height:100%;background-color: #FFFFFF; Z-index:1001;-moz-opacity:0.8;opacity:.80;filter:alpha (opacity=80);}
. white_content{display:none;position:absolute;top:25%;left:25%;width:50%;height:50%;p adding:16px;border:16px Solid Orange;margin:-32px;background-color:white;z-index:1002;overflow:auto;}
</style>
<script language= "javascript" type= "Text/javascript" >
function Moveselect (obj,target,all) {
if (!all) all=0
if (obj!= "[Object]") Obj=eval ("document.all.") +obj)
Target=eval ("document.all.") +target)
if (all==0)
{
while (obj.selectedindex>-1) {
Alert (Obj.selectedindex)
Mot=obj.options[obj.selectedindex].text
Mov=obj.options[obj.selectedindex].value
Obj.remove (Obj.selectedindex)
var newoption=document.createelement ("option");
Newoption.text=mot
Newoption.value=mov
Target.add (newoption)
}
}
Else
{
Alert (obj.options.length)
for (i=0;i<obj.length;i++)
{
Mot=obj.options[i].text
Mov=obj.options[i].value
var newoption=document.createelement ("option");
Newoption.text=mot
Newoption.value=mov
Target.add (newoption)
}
Obj.options.length=0
}
}
function Dakai () {
document.getElementById (' light '). style.display= ' block ';
document.getElementById (' fade '). style.display= ' Block '
}
function Guanbi () {
Upload the value of the right select to the text box
var Yuangong=document.getelementbyid ("Yuangong")
Yuangong.value= ""//If you do not add this sentence, the result of each selection is appended
var Huoqu=document.getelementbyid ("D2")
for (Var k=0;kYuangong.value=yuangong.value + huoqu.options[k].value + ""//"" in the middle of a space, character separator, can be changed to something else
document.getElementById (' light '). style.display= ' None ';
document.getElementById (' fade '). style.display= ' None '
}
</script>
<body>
<input type= "text" id= "Yuangong" onclick= "Dakai" () "size=" >
<div id= "Light" class= "white_content" >
<table border= "1" width= "id=" Table4 "bordercolor=" #CCCCCC "bordercolordark=" #CCCCCC "bordercolorlight=" FFFFFF "cellpadding=" 3 "cellspacing=" 0 ">
<tr>
<TD width= "height=" align= "center" valign= "Middle" >
Staff of the Department
<select size= "name=" D1 "ondblclick=" Moveselect (This, ' D2 ') "multiple=" multiple "style=" width:140px ">
<option value= "John" > John </option>
<option value= "Dick" > Dick </option>
<option value= "Xiao Wang" > Xiao Wang </option>
</select>
</td>
<TD width= "height=" align= "center" valign= "Middle" >
<input type= "button" value= "<<" name= "B3" onclick= "Moveselect (' D2 ', ' D1 ', 1)" ><br>
<input type= "button" value= "<" name= "B5" onclick= "Moveselect (' D2 ', ' D1 ')" ><br>
<input type= "button" value= ">" name= "B6" onclick= "Moveselect (' D1 ', ' D2 ')" ><br>
<input type= "button" value= ">>" name= "B4" onclick= "Moveselect (' D1 ', ' D2 ', 1)" ><br>
</td>
<TD width= "height=" align= "center" valign= "Middle" >
Staff waiting to divide department
<select size= "name=" D2 "id=" D2 "ondblclick=" Moveselect (This, ' D1 ') "multiple=" multiple "style=" width:140px " >
<option value= "Employee X" > Employee x</option>
<option value= "Employee Y" > Employee y</option>
</select>
</td>
</tr>
</table>
<a href= "javascript:void (0)" onclick= "Guanbi ()" > OK </a>
<input type= "button" name= "button" onclick= "Guanbi ()" value= "button can also determine" >
</div>
<div id= "Fade" class= "Black_overlay" ></div>
</body>
</body>
I hope this article will help you with your JavaScript programming.
