两个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> 动态 ...
随机推荐
- swift3.0变化总结
Swift 3.0 做出的改变很大,在这篇文章中,我将尽我所能,利用代码样例给大家解释Swift 3.0最重要(要命)的改变,希望大家能够做好升级Swift 3.0 的准备.Swift 3.0的改变不 ...
- RabbitMQ常用命令行
打印了一些rabbitmq服务状态信息,包括内存,硬盘,和使用erlong的版本信息rabbitmqctl -q status 各个参数说明:http://www.rabbitmq.com/man/r ...
- [从产品角度学EXCEL 01]-EXCEL是怎样运作的
这是<从产品角度学EXCEL>系列第二篇. 前言请看:从产品角度学EXCEL-系列0-为什么要关注EXCEL的本质 本文不接受无授权转载,如需转载,请先联系我,非常感谢. 1.EXCEL是 ...
- yum 操作复习
RPM与YUM是配合使用的. rpm负责从网站或指定的文件路径,获取到rpm软件包.也就是说你要安装什么服务或软件,就要先找到rpm包,下载下来.也就是通常说的配置yum源. 啥是yum源.你下载下的 ...
- 疑问，关于win64无法使用debug的问题
学习汇编语言的过程中,无法使用debug.exe,怎么办? 使用这篇文章中的解决方案 http://www.cnblogs.com/xuepeng0521/p/3661598.html 结果调试程序的 ...
- less入门
less入门 安装 首先安装node,执行命令 node install -g less安装完成后可以在任意窗口中使用lessc命令,将.less文件编译成css文件. 变量 可以像其他语言一样声明变 ...
- TI PDK3.0 qt 交叉编译环境设置
上午剑锋给的方法,成功在qtcreator上面加入TI官方的qmake以及他的交叉编译器. 1. 步骤如下: 1. 我假设TI PDK3.0 安装目录为顶层目录. 2. 进入linux-devkit ...
- Android Studio插件：PlantUML
标记语言式的UML图编写工具,插件全名:PlantUML integration. 注意这个还要安装另一个软件:http://www.graphviz.org 并在PlantUML的设置中指定其路径. ...
- Swift 学习中的一点体会，不断更新中。。。
随着Xcode 8的发布,swift 3.0终于来了.又有一大批api名字发生了变化.但是感觉3.0之后的变化应该会小些,因此再重新仔细学习一下. 1. 关于swift引入的Computed Prop ...
- cocos2d-js 学习笔记 --安装调试（2）
对于初学者安装cocos2d-js的环境并没有教程中说的那么简单,至少笔者是这么认为的 第一步,下载cocos2d-js的SDK,(先别着急运行) 第二步,安装Cocos2d console ,(Ma ...