select 左右多选实现

傷城~ 2022-08-12 08:59 227阅读 0赞

<!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">标签：</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" οndblclick="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" οnclick="PutRightOneClk('ptNbrs')" /><br /><br />  
<input type="button"  value=">>" id="PutRightAll" class="button1" οnclick="PutRightAllClk('ptNbrs')" /><br /><br />  
<input type="button"  value=" < " id="PutLeftOne" class="button1" οnclick="PutLeftOneClk('ptNbrs')" /><br /><br />  
<input type="button"  value="<<" id="PutLeftAll" class="button1" οnclick="PutLeftAllClk('ptNbrs')" />  
</div>  
<div>  
<select size="5" id="ptNbrs1" name="ptNbrs1" class="input" style="width:200px;height:200px;" multiple="multiple" οndblclick="PutLeftOneClk('ptNbrs')">  
</select>  
</div>  
          </td>  
            </tr>  
</table>  
</body>  
</html>