BlogJava 首页 新随笔 联系 聚合 管理
  37 Posts :: 64 Stories :: 21 Comments :: 0 Trackbacks
多下拉框之间传值，左右移操作，支持多选

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>   
<HEAD>   
<TITLE>选择下拉菜单</TITLE>   
<meta http-equiv="Content-Type" c>   
<META NAME="Description" C>   
</HEAD>   
<BODY>   
<p>选定一项或多项然后点击添加或移除(按住shift或ctrl可以多选)，或在选择项上双击进行添加和移除。</p>   
<form method="post" name="myform">   
<table border="0" width="300">   
<tr>   
    <td width="40%"><select style="WIDTH: 100%" multiple name="list1" size="12"   
      >   
      <option value="北京">北京</option>   
      <option value="上海">上海</option>   
      <option value="山东">山东</option>   
      <option value="安徽">安徽</option>   
      <option value="重庆">重庆</option>   
      <option value="福建">福建</option>   
      <option value="甘肃">甘肃</option>   
      <option value="广东">广东</option>   
      <option value="广西">广西</option>   
      <option value="贵州">贵州</option>   
      <option value="海南">海南</option>   
      <option value="河北">河北</option>   
      <option value="黑龙江">黑龙江</option>   
    </select></td>   
    <td width="20%" align="center"><input type="button" value="添加" onclick="javascript:moveOption(list1,list2)" 
      ><br />   
    <br />   
    <input type="button" value="删除" onclick="javascript:del(list2)" 
      ></td>   
    <td width="40%"><select style="WIDTH: 100%" multiple name="list2" size="12"   
      >   
    </select></td>   
    <td>   
    <button type="button" onclick="javascript:changepos(list2,-1)" >上移</button>   
    <br />   
    <button type="button" onclick="javascript:changepos(list2,1)" >下移</button>   
    </td>   
</tr>   
</table>   
值：<input type="text" name="city" size="40"></form>   
<script language="JavaScript"> 
//删除list2列表中的数据
function del(e){
try{    
for(var i=0;i<e.options.length;i++){    
if(e.options[i].selected){ 
   e.remove(i);    
iii=i-1    
}    
}    
document.myform.city.value=getvalue(document.myform.list2);    
}    
catch(e){}    
}
//移动list1的数据到list2 中 ，e1.remove(i)---list1的数据减少
function moveOption(e1, e2){    
try{    
for(var i=0;i<e1.options.length;i++){    
if(e1.options[i].selected){    
var e = e1.options[i];    
e2.options.add(new Option(e.text, e.value));    
//e1.remove(i);    
iii=i-1    
}    
}    
document.myform.city.value=getvalue(document.myform.list2);    
}    
catch(e){}    
}    
//获得列表的值
function getvalue(geto){    
var allvalue = "";    
for(var i=0;i<geto.options.length;i++){    
allvalue +=geto.options[i].value + ",";    
}    
return allvalue;    
}    
//上移或者下移 1 下移 -1 上移
function changepos(obj,index)    
{    
if(index==-1){    
if (obj.selectedIndex>0){    
obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex-1))    
}    
}    
else if(index==1){    
if (obj.selectedIndex<obj.options.length-1){    
obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex+1))    
}    
}    
}    
</script>   
</BODY>   
</HTML>  


 

posted on 2009-08-21 12:28 xiachang88 阅读(548) 评论(0)  编辑  收藏

只有注册用户登录后才能发表评论。
网站导航: