两个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> 动态 ...
随机推荐
- 堆排序分析及php实现
堆排序:是一种特殊形式的选择排序,他是简单选择排序的一种改进. 什么是堆? 具有n个元素的序列:{k1,k2,ki,…,kn} (ki <= k2i,ki <= k2i+1) 或者 (ki ...
- 使用sublime一键格式化XML文件
1 sublime简介 sublime是一款代码编辑和阅读软件,体积小,运行快,界面非常简洁漂亮.官方地址:https://www.sublimetext.com/ 2 在sublime上安装插件 使 ...
- eclipse导入myeclipse的web项目没法识别问题解决
(转载)原作者地址:http://www.cnblogs.com/Topless/archive/2011/11/23/2260085.html 1.进入项目目录,找到.project文件,打开. 2 ...
- 添加Silverlight应用到HTML
Silverlight是跨浏览器,跨客户平台的浏览器插件,可以应用在Windows,Linux,Mac等平台.作为浏览器插件,Silverlight可以像Flash一样,很方便的嵌套在HTML页面中, ...
- JAVA动态加载JAR
// 生成JAR包D:\TestClass.jar package hand.java.loadjar; public class TestClass { private String sayHell ...
- mysql 编译安装
mysql 编译安装方式: ```cd /home/oldboy/tools``` 创建 目录 if not have then mkd ...
- jvm--1.class文件结构
1.字节码(1)bytecode是构成平台无关性的基石 (2)当jvm发展到1.7-1.8的时候,jvm设计者通过,JSR-292,基本可以让其他语言运行在jvm上面. 如,Clojure , Gro ...
- postgresql中的CUBE函数
数据函数简介添加汇总额外信息 数据 --复杂统计函数 CREATE TABLE t3 (color_type varchar(20), in_date varchar(30),color_count ...
- 转载自lanceyan： 一致性hash和solr千万级数据分布式搜索引擎中的应用
一致性hash和solr千万级数据分布式搜索引擎中的应用 互联网创业中大部分人都是草根创业,这个时候没有强劲的服务器,也没有钱去买很昂贵的海量数据库.在这样严峻的条件下,一批又一批的创业者从创业中获得 ...
- 共享MFC dULL
>------ 已启动生成: 项目: OSGtest, 配置: Debug Win32 ------1>正在编译...1>AddScene.cpp1>main.cpp1> ...