两个select 左右添加，上下移动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
</head>
<body>
<center>
<table>
<tr align="center">
<td colspan="3">
选择
</td>
</tr>
<tr>
<td>
<select id="fb_list" name="fb_list" multiple="multiple"
size="8" style="width: 300px; height:200px;">
<option value="1">第七项</option>
<option value="6">第六项</option>
</select>
</td>
<td>
<input type="button" id="selectDown" name="selectDown" value="下移∨" />
<br />
<input type="button" id="selectup" name="selectup" value="上移∧" />
<br />
<input type="button" id="add" name="add" value="向右>>" />
<br />
<input type="button" id="delete" name="delete" value="<<向左" />
<br />
<input type="button" id="selectAllRight" name="selectAllRight" value="全部右边>>" />
<br />
<input type="button" id="selectAllLeft" name="selectAllLeft" value="<<全部向左" />
</td>
<td>
<select id="select_list" name="select_list" multiple="multiple"
size="8" style="width: 300px; height:200px;">
<option value="1">第一项</option>
<option value="2">第二项</option>
<option value="3">第三项</option>
<option value="4">第四项</option>
</select>
</td>
</tr>
</table>
</center>
<script>
//向右移动
$(function(){
$("#add").click(function(){
var selectList=true;
if($("#fb_list option:selected").length>0){
//判断右边有没有重复的val值
for(var i=0;i<$("#select_list option").length;i++){
if($("#fb_list option:selected").val()==$("#select_list option:eq("+i+")").val()){
alert("第二个列表已经有了");
selectList=false;
} }
if(selectList==true){
$("#select_list").append("<option value='"+$("#fb_list option:selected").val()+"'>"+$("#fb_list option:selected").text()+"</option");
$("#fb_list option:selected").remove();
return false;
} }else{
alert("请选择数据");
}
})
})
//向左移动
$(function(){
$("#delete").click(function(){
var selectList=true;
if($("#select_list option:selected").length>0){
for(var i=0;i<$("#fb_list option").length;i++){
if($("#select_list option:selected").val()==$("#fb_list option:eq("+i+")").val()){
alert("第一个列表已经有了");
selectList=false;
}
}
if(selectList==true){
$("#fb_list").append("<option value='"+$("#select_list option:selected").val()+"'>"+$("#select_list option:selected").text()+"</option");
$("#select_list option:selected").remove();
return false;
}
}else{
alert("请选择数据");
}
})
})
//向上移动
$(function(){
$("#selectup").click(function(){
$("select option:selected").each(function(){
$(this).prev().before($(this));
return false;
});
$("select").bind("change",function(){
var that = $(this);
var tempDom = that.find("option:selected");
$("select").find("option").removeAttr("selected");
tempDom.attr("selected","selected");
});
});
});
//向下移动
$(function(){
$("#selectDown").click(function(){
$("select option:selected").each(function(){
$(this).insertAfter($(this).next());
return false;
});
$("select").bind("change",function(){
var that = $(this);
var tempDom = that.find("option:selected");
$("select").find("option").removeAttr("selected");
tempDom.attr("selected","selected");
});
});
}); //全部移到右边
$('#selectAllRight').click(function(){
var selectList=true;
if($("#fb_list option:selected").length>0){
for(var i=0;i<$("#select_list option").length;i++){
for(var j=0;j<$("#fb_list option").length;j++){
if($("#select_list option:eq("+i+")").val()==$("#fb_list option:eq("+j+")").val()){
alert("第二个列表已经有了");
selectList=false;
}
}
}
if(selectList==true){
//获取全部的选项,删除并追加给对方
$('#fb_list option').appendTo('#select_list');
return false;
} }else{
alert("请选择数据");
} });
//全部移到左边
$('#selectAllLeft').click(function(){
var selectList=true;
if($("#select_list option:selected").length>0){
for(var i=0;i<$("#fb_list option").length;i++){
for(var j=0;j<$("#select_list option").length;j++){
if($("#select_list option:eq("+i+")").val()==$("#fb_list option:eq("+j+")").val()){
alert("第一个列表已经有了");
selectList=false;
}
}
}
if(selectList==true){
//获取全部的选项,删除并追加给对方
$('#select_list option').appendTo('#fb_list');
}
}else{
alert("请选择数据");
} }); </script>
</body>
</html>
两个select 左右添加，上下移动的更多相关文章
- jQuery获取Radio选择的Value值||两个select之间option的互相添加操作(jquery实现)
jQuery获取Radio选择的Value值: 1. $("input[name='radio_name'][checked]").val(); //选择被选中Radio的Val ...
- JS对select动态添加option操作 （三级联动） （搜索拼接）
以下纯属自我理解之下再东搜西查的内容~ JS对select动态添加option操作有个高大上的艺名叫多级联动:第一级改变时,第二级跟着变,第二级改变时,第三级跟着变... 本菜鸟是在工作中遇到做收货地 ...
- select元素添加option的add()方法 | try{}catch{}
1.javascript中的select元素添加option使用add()方法 select的add方法,第一个参数是需要被添加的option元素,第二个参数决定了被添加的位置 普通浏览器中,第二个参 ...
- js实现select动态添加option
关于 select 的添加 option 应该注意的问题. 标准的做法如上也就是说,标准的做法是 s.options.add();但是如果你一定要用 s.appendChild(option);注意了 ...
- js对select动态添加和删除OPTION
<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...
- JS对select动态添加options操作[IE&FireFox兼容]
<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...
- 使用js对select动态添加和删除OPTION示例代码
动态删除select中的所有options.某一项option以及动态添加select中的项option,在IE和FireFox都能测试成功,感兴趣的朋友可以参考下,希望对大家有所帮助 <s ...
- oracle中，将两个select语句的结果作为一个整体显示出来
如果我们需要将两个select语句的结果作为一个整体显示出来,我们就需要用到union或者union all关键字.union(或称为联合)的作用是将多个结果合并在一起显示出来.union和union ...
- 使用js对select动态添加和删除OPTION
<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...
随机推荐
- Eclipse启动Tomcat时server.xml和content.xml自动还原问题
当我们在处理中文乱码或是配置数据源时,我们要修改Tomcat下的server.xml和content.xml文件. 但是当我们修改完后重启Tomcat服务器时发现xml文件又被还原了,修改无效果. 为 ...
- [译]How to Write a Git Commit Message
原文: http://chris.beams.io/posts/git-commit/ 介绍:为什么好的commit message很重要 你浏览项目commit message的时候或多或少会有些困 ...
- [从产品角度学EXCEL 03]-单元格的秘密
这是<从产品角度学EXCEL>系列——单元格的秘密. 前言请看: 0 为什么要关注EXCEL的本质 1 EXCEL是怎样运作的 2 EXCEL里的树形结构 或者你可以去微信公众号@尾巴说数 ...
- jQuery学习过程问题笔记
1. jQuery中,$('selector').click(function(){})和用bind绑定:$('selector').bind('click',function(){})有什么区别? ...
- Matplotlib——第一章轻松画个图
首先安装matplotlib,使用pip install matplotlib.安装完成后在python的命令行敲入import matplotlib,如果没问题,说明安装成功可以开始画图了. 看好了 ...
- php curl 多线程方法
<?php /** * curl 多线程 * @param array $array 并行网址 * @param int $timeout 超时时间 * @return array */ fun ...
- 【新手出发】从搭虚拟机开始，一步一步在CentOS上跑起来.Net Core程序
文章背景 微软6月26号发布core 1.0版本后,园子里关于这方面的文章就更加火爆了,不管是从文章数量还是大家互动的热情来看,绝对是最热门的技术NO.1.我从去年底开始接触.net core到现在也 ...
- python+paramiko库+svn写的自动化部署脚本
第一篇博文 直接开门见山的说了. 这是件什么事?:每次部署都是复制本地的文件粘贴到服务器端,因为路径复杂,所以费时且手工容易出漏洞. 一直在想有什么办法可以解决这种,因为以前在微软的一个牛人同事做过一 ...
- c++中的继承与初始化
1.在c++中构造函数.析构函数.=运算符.友元无法继承 2.const 成员.引用成员.类的对象成员没有默认构造函数时,需在类的构造函数初始化列表中对其进行初始化 3.基类无默认构造函数,派生类需在 ...
- Intern---Microsoft Academic China Team
项目二: AEther: 项目 一.项目需求:对搜索关键词进行类别的统计分析,为了后面的entity-rank做准备. 0,各种关键数据统计: 数据量:1个月数据:about 1000T. 1,对IE ...