两个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 相关文章推荐
jquery validate.js表单验证的基本用法入门
May 13 Javascript
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
Sep 02 Javascript
解决遍历时Array.indexOf产生的性能问题
Jul 03 Javascript
js中哈希表的几种用法总结
Jan 28 Javascript
js enter键激发事件实例代码
Aug 17 Javascript
jQuery实现的放大镜效果示例
Sep 13 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
Feb 05 Javascript
javascript 中iframe高度自适应(同域)实例详解
May 16 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
Sep 14 Javascript
ES6 迭代器与可迭代对象的实现
Feb 11 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
Nov 06 Javascript
Element el-button 按钮组件的使用详解
Feb 01 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
如何分别全角和半角以避免乱码
2006/10/09 PHP
PHP下通过file_get_contents的代理使用方法
2011/02/16 PHP
ThinkPHP在Cli模式下使用模板引擎的方法
2015/09/25 PHP
php 微信开发获取用户信息如何实现
2016/12/13 PHP
PHP自定义函数实现数组比较功能示例
2017/10/19 PHP
PHP实现SMTP邮件的发送实例
2018/09/27 PHP
PHP的mysqli_set_charset()函数讲解
2019/01/23 PHP
javascript 出生日期和身份证判断大全
2008/11/13 Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
2012/12/17 Javascript
jQuery实现点击标题输入详细信息
2013/04/16 Javascript
JavaScript利用正则表达式去除日期中的“-”
2014/07/01 Javascript
node.js中的require使用详解
2014/12/15 Javascript
JS给超链接加确认对话框的方法
2015/02/24 Javascript
每天一篇javascript学习小结(Array数组)
2015/11/11 Javascript
jquery获取img的src值的简单实例
2016/05/17 Javascript
js获取css的各种样式并且设置他们的方法
2017/08/22 Javascript
javascript 作用于作用域链的详解
2017/09/27 Javascript
Angular实现的简单查询天气预报功能示例
2017/12/27 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
2018/03/25 jQuery
vue 本地环境跨域请求proxyTable的方法
2018/09/19 Javascript
vue 出现data-v-xxx的原因及解决
2020/08/04 Javascript
vue递归获取父元素的元素实例
2020/08/07 Javascript
Python内建数据结构详解
2016/02/03 Python
python3 图片referer防盗链的实现方法
2018/03/12 Python
Python面向对象程序设计之类的定义与继承简单示例
2019/03/18 Python
Python改变对象的字符串显示的方法
2020/08/01 Python
如何创建一个Flask项目并进行简单配置
2020/11/18 Python
办公室年终个人自我评价
2013/10/28 职场文书
本科毕业生专业自荐书范文
2014/02/05 职场文书
《小猪家的桃花树》教学反思
2014/04/11 职场文书
遗嘱继承权公证书
2015/01/26 职场文书
家装业务员岗位职责
2015/04/03 职场文书
奖学金发言稿(范文)
2019/08/21 职场文书
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
2021/04/03 Javascript
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
2021/06/29 Javascript
腾讯云服务器部署前后分离项目之前端部署
2022/06/28 Servers