左边select内容选择到右边select内容里面的js实现方法(可以多选和全选)

来源:互联网 发布:Linux用Vim替代字符 编辑:程序博客网 时间:2024/05/16 20:28
<script language="JavaScript">
function copyToList(from,to) //from表示:包含可选择项目的select对象名字 to表示:列出可选择项目的select对象名字
//
你可以根据你的具体情况修改
{
fromList 
= eval('document.forms[0].' + from);
toList 
= eval('document.forms[0].' + to);
if (toList.options.length > 0 && toList.options[0].value == 'temp')
{
    toList.options.length 
= 0;
}
var sel = false;
for (i=0;i<fromList.options.length;i++)
{
    
var current = fromList.options[i];
    
if (current.selected)
    {
      sel 
= true;
      
if (current.value == 'temp')
      {
        alert (
'你不能选择这个项目!');
        
return;
      }
      txt 
= current.text;
      val 
= current.value;
      toList.options[toList.length] 
= new Option(txt,val);
      fromList.options[i] 
= null;
      i
--;
    }
}
}
function allSelect() //这是当用户按下提交按钮时,对列出选择的select对象执行全选工作,让递交至的后台程序能取得相关数据
{
List 
= document.forms[0].chosen;
if (List.length && List.options[0].value == 'temp'return;
for (i=0;i<List.length;i++)
{
     List.options[i].selected 
= true;
}
}
function copyAll(from,to){

var fromList = eval('document.forms[0].' + from);
var toList = eval('document.forms[0].' + to);
if (toList.options.length > 0 && toList.options[0].value == 'temp')
{
    toList.options.length 
= 0;
}
for (i=0;i<fromList.options.length;i++)
{
      
var current = fromList.options[i];
      toList.options[toList.length] 
= new Option(current.text,current.value);
      fromList.options[i] 
= null;
      i
--;
}
}
</script>
<table border="0"> <form onSubmit="allSelect()">
              
<tr>
                
<td>
                  
<select name="possible" size="4"
MULTIPLE width
=200 style="width: 200px">
                    
<option value="1">中国广州
                    
<option value="2">中国上海
                    
<option value="3">中国北京
                    
<option value="4">中国武汉
     
                  
</select>
                
</td>
                  
<td><href="javascript:copyToList('possible','chosen')">添加至右方--></a><br>
                    
<br>
                    
<href="javascript:copyAll('possible','chosen')">添加All至右方--></a>
                    
<br><br>
                    
</a><href="javascript:copyToList('chosen','possible')"><--添加至左方

</a
><br><br>                   </a><href="javascript:copyAll('chosen','possible')"><--添加All至

左方</a
>
                    
<br></td>
                
<td>
                  
<select name="chosen" size="4"
MULTIPLE width
=200 style="width: 200px;">
                    
<option value="temp">从左边选择你的地区 
                  
</select>
                
</td>
              
</tr> </form>
            
</table>
 
原创粉丝点击