两个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 相关文章推荐
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
Jul 25 Javascript
页面载入结束自动调用js函数示例
Sep 23 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
Aug 19 Javascript
浅析javascript函数表达式
Feb 10 Javascript
高效Web开发的10个jQuery代码片段
Jul 22 Javascript
Bootstrap媒体对象学习使用
Mar 07 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
May 11 Javascript
最全的JavaScript开发工具列表 总有一款适合你
Jun 29 Javascript
使用cropper.js裁剪头像的实例代码
Sep 29 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
jquery实现吸顶导航效果
Jan 08 jQuery
JavaScript实现鼠标移入随机变换颜色
Nov 24 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 删除无限级目录与文件代码共享
2008/11/22 PHP
PHP设计模式 注册表模式(多个类的注册)
2012/02/05 PHP
PHP stripos()函数及注意事项的分析
2013/06/08 PHP
Django 标签筛选的实现代码(一对多、多对多)
2018/09/05 PHP
Yii2.0框架模型多表关联查询示例
2019/07/18 PHP
InnerHtml和InnerText的区别分析
2009/03/13 Javascript
jQuery代码优化之基本事件
2011/11/01 Javascript
js将字符串转成正则表达式的实现方法
2013/11/13 Javascript
jQuery窗口、文档、网页各种高度的精确理解
2014/07/02 Javascript
浅谈JavaScript中指针和地址
2015/07/26 Javascript
AngularJs ng-route路由详解及实例代码
2016/09/14 Javascript
vue.js将时间戳转化为日期格式的实现代码
2018/06/05 Javascript
vue实现文件上传功能
2018/08/13 Javascript
vue路由插件之vue-route
2019/06/13 Javascript
jquery图片预览插件实现方法详解
2019/07/18 jQuery
小程序使用wxs解决wxml保留2位小数问题
2019/12/13 Javascript
在Python中使用第三方模块的教程
2015/04/27 Python
Python素数检测实例分析
2015/06/15 Python
在Python的while循环中使用else以及循环嵌套的用法
2015/10/14 Python
对dataframe进行列相加,行相加的实例
2018/06/08 Python
Python实现查询某个目录下修改时间最新的文件示例
2018/08/29 Python
PyCharm Anaconda配置PyQt5开发环境及创建项目的教程详解
2020/03/24 Python
TensorFlow固化模型的实现操作
2020/05/26 Python
Python库安装速度过慢解决方案
2020/07/14 Python
python中实现词云图的示例
2020/12/19 Python
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
2012/12/28 HTML / CSS
HTML5 visibilityState属性详细介绍和使用实例
2014/05/03 HTML / CSS
HTML5到底会有什么发展?HTML5的前景展望
2015/07/07 HTML / CSS
英国最大的专业户外零售商:Mountain Warehouse
2018/06/06 全球购物
Mamaearth官方网站:印度母婴护理产品公司
2019/10/06 全球购物
英国时尚高尔夫服装购物网站:Trendy Golf
2020/01/10 全球购物
xml有哪些解析技术?区别是什么
2016/04/26 面试题
腾讯公司的一个sql题
2013/01/22 面试题
初始化了一个没有run()方法的线程类,是否会出错?
2014/03/27 面试题
运输服务质量承诺书
2014/03/27 职场文书
代办委托书怎么写
2014/08/01 职场文书