两个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> 动态 ...
随机推荐
- Yii2 定时任务创建（Console 任务）
Yii2的定时任务可以有两种写法,原理都是通过服务器的定时任务去调用 1.通过调用指定的URL访问 就相当于在浏览器中访问 2.通过console调用 下面我们就来说说Console 是如何实现定时任 ...
- php-fpm优化方法详解
php-fpm优化方法 php-fpm存在两种方式,一种是直接开启指定数量的php-fpm进程,不再增加或者减少:另一种则是开始时开启一定数量的php-fpm进程,当请求量变大时,动态的增加php-f ...
- 【WP8.1】类似“IT之家” 自定义消息 的实现
曾经在WP7.WP8下的消息 使用的都是Coding4Fun.Phone.Toolkit里面的ToastPrompt类来实现的. 现在我们来自己做个类似IT之家的这种效果:从右边弹出,经过几秒后会自动 ...
- 防御CSRF的方法有哪些（一） HTTP 头中自定义属性并验证 CSRF跨站域请求伪造攻击
CSRF (Cross Site Request Forgery, 跨站域请求伪造)是一种网络的攻击方式,该攻击可以在受害者毫不知情的情况下以受害者名义伪造请求发送给受攻击站点,从而在并未授权的情况下 ...
- 如何添加商*通新对话快捷链接?不用js代码
我们在使用商务通一般都是在页面中嵌入一段js代码,如果您是js洁癖,是不是在想着如何直接用一张小图加上商*通新对话链接来代替呢?好,那就一起来研究一下吧. 首先,我们打开一个有商*通js弹窗的页面,比 ...
- 移动端web开发的一些知识点
整理一下自己平时移动端web开发中遇到的问题,也参考一下前辈的一些总结 1.最常见的要数1像素边框了 因为Retine屏的分辨率始终是普通屏幕的2倍,1px的边框在dpr=2的retina屏下会显示成 ...
- 解决JSP页面获取的数据库数据乱码问题
将java项目部署到服务器,页面数据乱码: 解决:首先查看了数据库编码和jsp编码都是utf-8,说明jsp和数据库没问题,于是查看了tomcat设置的编码 没有设置编码,于是加了URIEncodin ...
- erlang 故障排查工具
系统级别perf top, dstat -tam, vtune 都能很好分析beam 瓶颈,本文主要erlang 级别排查: 1. 反编译 确认线上运行代码是否正确,reltools没掌握好,升级偶尔 ...
- BeanUtils.populate(obj, map);
public static void populate(Object bean, Map<String, ? extends Object> properties) throws Ille ...
- C#接口的作用(经典)
C#接口是一个让很多初学C#者容易迷糊的东西,用起来好像很简单,定义接口,里面包含方法,但没有方法具体实现的代码,然后在继承该接口的类里面要实现接口的所有方法的代码,但没有真正认识到接口的作用的时候就 ...