首页 > 代码库 > select 左右多选实现

select 左右多选实现

2024-07-23 20:15:56   224人阅读

<!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" ondblclick="PutRightOneClk(‘ptNbrs‘)">
    <option value=http://www.mamicode.com/"0" >qqqq
    <option value=http://www.mamicode.com/"1" >wwww
<option value=http://www.mamicode.com/"2" >eeee
</select>
</div>
<div style="float:left">
<input type="button"  value=http://www.mamicode.com/" > " id="PutRightOne" class="button1" onclick="PutRightOneClk(‘ptNbrs‘)" />


<input type="button"  value=http://www.mamicode.com/">>" id="PutRightAll" class="button1" onclick="PutRightAllClk(‘ptNbrs‘)" />


<input type="button"  value=http://www.mamicode.com/" < " id="PutLeftOne" class="button1" onclick="PutLeftOneClk(‘ptNbrs‘)" />


<input type="button"  value=http://www.mamicode.com/"<<" 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>

select 左右多选实现


联系
我们