两个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> 动态 ...
随机推荐
- 网站设置404页面 --nginx
有的时候根据域名要先知道用的什么web 服务器 最简单的 http://tool.chinaz.com/pagestatus/ 输入域名,看返回的头部信息 用的那个web浏览器 下面的方法也是根据头 ...
- css水平垂直居中对齐方式
1.文字或者内联元素的垂直水平居中对齐 css属性 -- 水平居中:text-aligin:center; 垂直居中: line-height:height; 例子:. html: <div c ...
- 【ueditor】api方法
//让其选中文本高亮 editor.selection.getRange().select(); //高亮后,才能获取到选中文本,当选中字失去焦点的情况下是获取不到的选中文本的 var text = ...
- 兼容好的JS图片上传预览代码
转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...
- PopupWindow 使用
昨天马失前蹄,为了做一个小键盘,耽误了两个小时,记录一下心路历程 1.关于需求与选择 需求: 点击一个按钮,弹出一个小键盘(类似于输入法键盘) 选择: (1)方案一:KeyboardView 这是百度 ...
- 微信开发(一)内网映射之natapp的使用
1.https://natapp.cn/client/lists 从官网下载客户端和注册账号 2.打开文件后退出 当前Ctrl+C 输入natapp -authtoken=xxxxx 此为从我的客户端 ...
- java基础 布局管理器
概念: 组建在容器(比如JFrame)中的位置和 大小 是由布局管理器来决定的.所有的容器都会使用一个布局管理器,通过它来自动进行组建的布局管理. 种类: java共提供了物种布局管理器:流式布局管理 ...
- 鼠标上下滑动总是放大缩小页面，按住ctrl+0
鼠标上下滑动总是放大缩小页面,可能是ctrl键失灵了,幸好键盘有两个ctrl键,按住ctrl+0,页面就正常了,吓死宝宝了,~~~~(>_<)~~~~
- 服务器通过微信公众号Token验证测试的代码（Python版）
我在阿里云租了一个云服务器,然后想把这个作为我的微信公众号的后台,启用微信公众号开发者需要正确的响应微信服务器的Token验证,为此把这个验证的Python代码贴出来,只要在服务器上运行这段代码,注意 ...
- dubbo实践
最近公司准备重构内部服务模块,准备使用dubbo,故研究一下. 官方文档:http://alibaba.github.io/dubbo-doc-static/Home-zh.htm 1. 用maven ...