Select multiple select implementation, select multiple select implementation
<! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Title> </title>
<Script type = "text/javascript">
Function $ (e) {return document. getElementById (e );}
Function PutRightOneClk (str ){
If ($ (str + "0"). options. selectedIndex =-1) {return false ;}
While ($ (str + "0"). options. selectedIndex>-1 ){
Var id = $ (str + "0"). options. selectedIndex
Var varitem = new Option ($ (str + "0"). options [id]. text, $ (str + "0"). options [id]. value );
$ (Str + "1"). options. add (varitem );
$ (Str + "0"). options. remove (id );
}
}
Function PutRightAllClk (str ){
If ($ (str + "0"). options. length = 0) {return false ;}
For (var I = 0; I <$ (str + "0"). options. length; I ++ ){
Var varitem = new Option ($ (str + "0"). options [I]. text, $ (str + "0"). options [I]. value );
$ (Str + "1"). options. add (varitem );
}
$ (Str + "0"). options. length = 0;
}
Function PutLeftOneClk (str ){
If ($ (str + "1"). options. selectedIndex =-1) {return false ;}
While ($ (str + "1"). options. selectedIndex>-1 ){
Var id = $ (str + "1"). options. selectedIndex
Var varitem = new Option ($ (str + "1"). options [id]. text, $ (str + "1"). options [id]. value );
$ (Str + "0"). options. add (varitem );
$ (Str + "1"). options. remove (id );
}
}
Function PutLeftAllClk (str ){
If ($ (str + "1"). options. length = 0) {return false ;}
For (var I = 0; I <$ (str + "1"). options. length; I ++ ){
Var varitem = new Option ($ (str + "1"). options [I]. text, $ (str + "1"). options [I]. value );
$ (Str + "0"). options. add (varitem );
}
$ (Str + "1"). options. length = 0;
}
</Script>
</Head>
<Body>
<Table>
<Tr>
<Td width = "20%" class = "biaoti-2" align = "right"> label: </td>
<Td class = "formword" colspan = "3" width = "80%">
<Div style = "float: left;">
<Select size = "5" id = "ptNbrs0" class = "input" style = "width: 200px; height: 200px; "multiple =" multiple "ondblclick =" PutRightOneClk ('ptnbrs') ">
<Option value = "0"> qqqq </option>
<Option value = "1"> wwww </option>
<Option value = "2"> eeee </option>
</Select>
</Div>
<Div style = "float: left">
<Input type = "button" value = ">" id = "PutRightOne" class = "button1" onclick = "PutRightOneClk ('ptnbrs ') "/> <br/>
<Input type = "button" value = ">" id = "PutRightAll" class = "button1" onclick = "PutRightAllClk ('ptnbrs ') "/> <br/>
<Input type = "button" value = "<" id = "PutLeftOne" class = "button1" onclick = "PutLeftOneClk ('ptnbrs ') "/> <br/>
<Input type = "button" value = "<" id = "PutLeftAll" class = "button1" onclick = "PutLeftAllClk ('ptnbrs')"/>
</Div>
<Div>
<Select size = "5" id = "ptNbrs1" name = "ptNbrs1" class = "input" style = "width: 200px; height: 200px; "multiple =" multiple "ondblclick =" PutLeftOneClk ('ptnbrs') ">
</Select>
</Div>
</Td>
</Tr>
</Table>
</Body>
</Html>
How to implement multiple drop-down boxes in html
The select tag has a multiple attribute and is set to multiple = "multiple". Press Ctrl to select multiple instances. See the example below:
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> untitled document </title>
</Head>
<Script language = "javascript">
Function getValue ()
{
Var s = "";
For (var I = 0; I <form1.ss. options. length; I ++)
{
If (form1.ss. options [I]. selected)
{
S + = form1.ss. options [I]. value;
}
}
Alert (s );
}
</Script>
<Body>
<Form id = "form1" name = "form1" method = "post" action = "">
Select:
<Select id = "ss" name = "ss" size = "5" multiple = "multiple">
<Option value = "1"> 1 </option>
<Option value = "2"> 2 </option>
<Option value = "3"> 3 </option>
<Option value = "4"> 4 </option>
<Option value = "5"> 5 </option>
<Option value = "6"> 6 </option>
<Option value = "7"> 7 </option>
<Option value = "8"> 8 </option>
</Select>
<Br>
<Input type = "button" name = "Submit" value = "Submit" onclick = "getValue ()"/>
</Form>
</Body>
</Html>
************* *********
Modify the size attribute of the select tag and change its value to... the remaining full text>
How to Use JS to select all and cancel all of multiple selection boxes
You can change the control name!
Run the following command to connect to a file:
---
1. php
<Script>
Function $ (id ){
Return document. getElementById (id );
}
Function checkall( obj, form ){
Var bool = (obj. checked )? True: false;
For (var I = 0; I <form. length; I ++ ){
Form. all [I]. selected = bool;
}
}
</Script>
<Form action = "2.php" method =" post ">
<Input type = "checkbox" name = "checkall" id = "checkall" onclick = "checkall( this, $ ('select')" checked> select all <br>
<Select multiple name = "select []" id = "select" size = "15" style = "width: 210px; height: 250px">
<Option value = "1" selected> large meals </option>
<Option value = "2" selected> large scale </option>
<Option value = "3" selected> scale down </option>
<Option value = "4" selected> to judicial office </option>
</Select>
<Input type = "submit" value = "submit">
</Form>
---
2. php
<?
Echo $ select [0];
Echo $ select [1];
Echo $ select [2];
Echo $ select [3];
?>