两个select多选模式的选项相互移动(示例代码)


Posted in Javascript onJanuary 11, 2014

如下所示:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function copyToList(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;
    }
    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--;
        }
    }
    if(!sel) alert('你还没有选择任何项目!');
}

function allSelect(){    
    var chsen=document.getElementById('chosen');
    //如果chsen列表框为0或第一个选项值为'temp'
    if(chsen.length && chsen.options[0].value=="temp")
        return;
    for(var i=0;i<chsen.length;i++){
            chsen.options[i].selected=true;
    }
//得到数据
 function getdata() {
            var List = document.forms[0].RoleList;



 //得到一个隐藏文本框对象
            var roles = document.getElementById("TRoleList");
            roles.value = "";
            var s = "";
            if (List.length != 0) {
                for (i = 0; i < List.length; i++) {
                    s += List.options[i].value + ",";
                }
            }
            roles.value = s;
        }
}
</script>
</head>
<body>
<table border="0">
<form onSubmit="allSelect()">   
<tr>   
<td>   
<select name="possible" size="4" MULTIPLE width="200" style="width:200px">   
<option value="1">中国广州</option>
<option value="2">中国上海</option>
<option value="3">中国北京</option>   
<option value="4">中国武汉</option> 
</select>   
</td>   
<td><a href="javascript:copyToList('possible','chosen')">添加至右方--><br>   
<br>
</a><a href="javascript:copyToList('chosen','possible')"><--添加至左方</a></td>   
<td>   
<select name="chosen"   size="4" MULTIPLE  width="200"  style="width:200px;">   
<option value="temp">从左边选择你的地区</option> 
</select>   
</td>   
</tr>
</form>   
</table>
<input type="button"  value="提交"  onclick="allSelect()" />yle
<input type="text" style="display:none;" id="TRoleList">
</body>
</html>
Javascript 相关文章推荐
js获取字符串最后一位方法汇总
Nov 13 Javascript
JavaScript中的立即执行函数表达式介绍
Mar 15 Javascript
jQuery的load()方法及其回调函数用法实例
Mar 25 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
Oct 30 Javascript
AngularJS 日期格式化详解
Dec 23 Javascript
js实现简单的碰壁反弹效果
Aug 30 Javascript
JavaScript基础进阶之数组方法总结(推荐)
Sep 04 Javascript
vue-star评星组件开发实例
Mar 01 Javascript
微信小程序WebSocket实现聊天对话功能
Jul 06 Javascript
vue动态设置img的src路径实例
Sep 18 Javascript
JS实现指定区域的全屏显示功能示例
Apr 25 Javascript
Vue商品控件与购物车联动效果的实例代码
Jul 21 Javascript
利用javascript打开模态对话框(示例代码)
Jan 11 #Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
Jan 11 #Javascript
JS对话框_JS模态对话框showModalDialog用法总结
Jan 11 #Javascript
Javascript自定义函数判断网站访问类型是PC还是移动终端
Jan 10 #Javascript
兼容主流浏览器的iframe自适应高度js脚本
Jan 10 #Javascript
javascript遍历控件实例详细解析
Jan 10 #Javascript
关闭ie窗口清除Session的解决方法
Jan 10 #Javascript
You might like
php xml实例 留言本
2009/03/20 PHP
php 字符过滤类,用于过滤各类用户输入的数据
2009/05/27 PHP
PHP 处理图片的类实现代码
2009/10/23 PHP
基于PHP5魔术常量与魔术方法的详解
2013/06/13 PHP
php计算一个文件大小的方法
2015/03/30 PHP
PHPExcel 修改已存在Excel的方法
2018/05/03 PHP
深入分析js中的constructor和prototype
2012/04/07 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
2015/01/13 Javascript
jQuery给动态添加的元素绑定事件的方法
2015/03/09 Javascript
JS使用正则表达式除去字符串中重复字符的方法
2015/11/05 Javascript
js实现瀑布流效果(自动生成新的内容)
2017/03/16 Javascript
JS实现的添加弹出层并完成锁屏操作示例
2017/04/07 Javascript
浅谈AngularJS中$http服务的简单用法
2018/05/15 Javascript
使用taro开发微信小程序遇到的坑总结
2019/04/08 Javascript
Node.js API详解之 module模块用法实例分析
2020/05/13 Javascript
原生JavaScript实现购物车
2021/01/10 Javascript
[55:35]VGJ.S vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
[56:14]Fnatic vs OG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python 字符串split的用法分享
2013/03/23 Python
Python解决pip install时出现的Could not fetch URL问题
2019/08/01 Python
详解使用python3.7配置开发钉钉群自定义机器人(2020年新版攻略)
2020/04/01 Python
Python如何实现FTP功能
2020/05/28 Python
CSS3实现红包抖动效果
2020/12/23 HTML / CSS
web字体加载方案优化小结
2019/11/29 HTML / CSS
英国领先的隐形眼镜在线供应商:Lenstore.co.uk
2019/11/24 全球购物
银行职业规划书范文
2013/12/28 职场文书
安全生产知识竞赛活动总结
2014/07/07 职场文书
安全教育观后感
2015/06/17 职场文书
2016三八妇女节慰问信
2015/11/30 职场文书
2016年校园重阳节广播稿
2015/12/18 职场文书
2016党员党章学习心得体会
2016/01/14 职场文书
祝福语集锦:送给毕业同学祝福语
2019/11/21 职场文书
python使用openpyxl库读写Excel表格的方法(增删改查操作)
2021/05/02 Python
详解Javascript实践中的命令模式
2021/05/05 Javascript
如何用Laravel包含你自己的帮助函数
2021/05/27 PHP
Python 数据可视化之Matplotlib详解
2021/11/02 Python