两个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 相关文章推荐
编辑浪子版表单验证类
May 12 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
Oct 30 Javascript
jquery validate表单验证的基本用法入门
Jan 18 Javascript
JavaScript的this关键字的理解
Jun 18 Javascript
微信小程序 Button 组件详解及简单实例
Jan 10 Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
vue组件横向树实现代码
Aug 02 Javascript
JS实现百度网盘任意文件强制下载功能
Aug 31 Javascript
JS实现继承的几种常用方式示例
Jun 22 Javascript
基于VUE的v-charts的曲线显示功能
Oct 01 Javascript
electron 安装,调试,打包的具体使用
Nov 06 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
Jul 28 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
解析file_get_contents模仿浏览器头(user_agent)获取数据
2013/06/27 PHP
php中switch与ifelse的效率区别及适用情况分析
2015/02/12 PHP
Mac版PhpStorm之XAMPP整合apache服务器配置的图文教程详解
2016/10/13 PHP
yii2-GridView在开发中常用的功能及技巧总结
2017/01/07 PHP
PHP连接SQL server数据库测试脚本运行实例
2020/08/24 PHP
JavaScript入门教程(12) js对象化编程
2009/01/31 Javascript
jquery 插件实现图片延迟加载效果代码
2010/02/06 Javascript
jquery单行文字向上滚动效果示例
2014/03/06 Javascript
JS模拟实现Select效果代码
2015/09/24 Javascript
通过扫描二维码打开app的实现代码
2016/11/10 Javascript
Node.js中process模块常用的属性和方法
2016/12/13 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
2017/09/20 jQuery
尝试自己动手用react来写一个分页组件(小结)
2018/02/09 Javascript
基于jQuery使用Ajax动态执行模糊查询功能
2018/07/05 jQuery
详解@Vue/Cli 3 Invalid Host header 错误解决办法
2019/01/02 Javascript
微信小程序实用代码段(收藏版)
2019/12/17 Javascript
用Python编写脚本使IE实现代理上网的教程
2015/04/23 Python
通过mod_python配置运行在Apache上的Django框架
2015/07/22 Python
python批量复制图片到另一个文件夹
2018/09/17 Python
python实现五子棋游戏
2019/06/18 Python
详解Python打包分发工具setuptools
2019/08/05 Python
Spring Cloud Feign高级应用实例详解
2019/12/10 Python
浅析Django 接收所有文件,前端展示文件(包括视频,文件,图片)ajax请求
2020/03/09 Python
Python基于yaml文件配置logging日志过程解析
2020/06/23 Python
Python如何获取文件路径/目录
2020/09/22 Python
详解Python中Pyyaml模块的使用
2020/10/08 Python
HTML5拖拉上传文件的简单实例
2017/01/11 HTML / CSS
canvas简单连线动画的实现代码
2020/02/04 HTML / CSS
Columbia美国官网:美国著名的户外服装品牌
2016/11/24 全球购物
英国川宁茶官方网站:Twinings茶
2019/05/21 全球购物
投资建议书模板
2014/05/12 职场文书
孝老爱亲模范事迹材料
2014/05/25 职场文书
汽车技术服务与贸易专业求职信
2014/07/20 职场文书
小学语文教师研修日志
2015/11/13 职场文书
Java 多线程并发FutureTask
2022/06/28 Java/Android
Windows Server 版本 20H2 于 8 月 9 日停止支持,Win10 版本 21H1 将于 12 月结束支
2022/07/23 数码科技