简单jQuery实现选项框中列表项的选择
这段代码非常的简单，仅仅作为自己的一个小小的记录！
ok，先上一个简单的图例，效果如下（注意：这只是一个简单的例子，不过可以根据这个简单的例子，变化出更为复杂的效果）！
代码也非常的简单，如下所示（注意：图片的路径是在我的小例子中的，表的样式也有待自己的调整，还有许多的样式文件和jQuery的JS文件没有包含在代码中，此代码主要是一个记录一个样例！）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<title>例子</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="Cache-Control" content="no-store"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="0"/> <style type="text/css">
.selcet1 {
border:#CCC solid 1px;
padding:3px;
margin:0px;
font:14px;
width:250;
min-width: 83px;
}
</style>
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
//点击添加按钮
$('#add').click(function() {
$('#leftIdList option:selected').remove().appendTo('#rightIdList');
}); //点击删除按钮
$('#delete').click(function() {
$('#rightIdList option:selected').appendTo('#leftIdList');
}); //双击事件
$('#leftIdList').dblclick(function() {
//we will delete the options of the leftIdList when the rightIdList include the same options
var rightIdListLength = $('#rightIdList option').length;
$('#leftIdList option:selected').each(function(){
for(var i=0;i<rightIdListLength;i++) {
if($("#rightIdList option[index="+i+"]").val()==$(this).val()){
$(this).remove();
}
}
}); $('#leftIdList option:selected').appendTo('#rightIdList');
}); $('#rightIdList').dblclick(function() {
//we will delete the options of the rightIdList when the leftIdList include the same options
var leftIdListLength = $('#leftIdList option').length;
$('#rightIdList option:selected').each(function(){
for(var i=0;i<leftIdListLength;i++) {
if($("#leftIdList option[index="+i+"]").val()==$(this).val()){
$(this).remove();
}
}
}); $('#rightIdList option:selected').appendTo('#leftIdList');
});
}); function getIdList() {
var optionstring = "";
optionstring += "<option value=\"001\" >001</option>"+
"<option value=\"002\" >002</option>"+
"<option value=\"003\" >003</option>"+
"<option value=\"004\" >004</option>"+
"<option value=\"005\" >005</option>"+
"<option value=\"006\" >006</option>"+
"<option value=\"007\" >007</option>"+
"<option value=\"008\" >008</option>"+
"<option value=\"009\" >009</option>"+
"<option value=\"010\" >010</option>"; $("#leftIdList").html(optionstring);
}
//调用Ajax功能，这个方法是待用的，在实际的项目中使用
function getIdList_() {
$.ajax({
type : "post",
url : "/acode/getIdList.action",
data:{id:function(){return $("#id").val();}},
dataType : "json",
error:function(){
alert("没有对应的数据，请查看输入的查询条件！");
},
success : function(data) {
if (data.length == 0) {return;}
var optionstring = "";
for ( var i = 0; i < data.length; i++) {
optionstring += "<option value=\""+ data[i].id +"\" >"+ data[i].id+"</option>";
}
$("#leftIdList").html(optionstring);
}
});
}
</script>
</head>
<body>
<table>
<tr>
<td align="left">待选学号</td>
<td width="81"></td>
<td class="notNull" align="left">已选学号</td>
</tr>
<tr>
<td width="83" align="left"><input id="id" class="input-w-95-1" type="text" onkeyup="getIdList()"/></td>
<td width="81"></td>
<td></td>
</tr>
<tr>
<td width="83" ><select name="ids_" multiple="multiple" class="selcet1" id="leftIdList" style="width:200;height:100px;"></select></td>
<td width="81">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td><img onmouseover ="this.src='/acode/images/button/d-tj-2.gif'" onmouseout="this.src='/acode/images/button/d-dt.gif'" src="/acode/images/button/d-dt.gif" width="81" height="25" id="add"/></td>
</tr>
<tr>
<td><img onmouseover ="this.src='/acode/images/button/d-sc-2.gif'" onmouseout="this.src='/acode/images/button/d-sc.gif'" src="/acode/images/button/d-sc.gif" width="81" height="25" id="delete"/></td>
</tr>
</table>
</td>
<td><select name="ids" multiple="multiple" class="selcet1" id="rightIdList" style="width:200;height:100px;"></select></td>
</tr>
</table>
</body>
</html>
简单jQuery实现选项框中列表项的选择的更多相关文章
- jquery选中将select下拉框中一项后赋值给text文本框
jquery选中将select下拉框中一项后赋值给text文本框,出现无法将第一个下拉框的value赋值给文本框 因为select默认选中第一项..在选择第一项时,便导致无法激发onchange事件. ...
- CSS中列表项list样式
CSS列表属性 属性 描述 list-style-属性 用于把所有用于列表的属性设置于一个声明中. list-style-image 将图象设置为列表项标志. list-style-position ...
- Android弹出选项框及指示箭头动画选择
Android弹出选项框及指示箭头动画选择 Android原生的Spinner提供了下拉列表选项框,但在一些流行的APP中,原生的Spinner似乎不太受待见,而通常会有下图所示的下拉列表选项框 ...
- (转) Wp7 list 中列表项多样化的解决方案-Custom DataTemplateSelector
本文转自: http://www.cnblogs.com/sonyye/archive/2012/03/03/2378825.html 在这篇文章中,我将解释如何在Windows Phone 7中创建 ...
- easyui中combobox 验证输入的值必须为选项框中的数据
当作为提示框的方式时,combobox必须设置为允许用户输入的模式,但是当用户输入后未选择正确的数据就直接按tab或点击鼠标离开控件会导致用户输入无效的值并且通过验证,为了避免这种情况的发生我们需要对 ...
- 如何修改html中列表项li所显示的圆点的颜色？，以及相关样式的设定
这是li标签自带的圆点的颜色改变,代码如下: .centerbt li{ content:"."; color:gray; } 在标签li后面加入“@”符号,这里都会使用posit ...
- javascript实现ul中列表项随机排列
方法1 <!DOCTYPE html><html lang="en"><head> <script type="text/jav ...
- selected中第一项 请选择，隐藏
如何做到selected 类似input的提示语 placeholder效果. <select class="wyj_dbfs"> <option style= ...
- JQuery checkbox多选框组选中提交，当选择某（无）一项，其他项禁止选中
在项目中难免会遇到一些表单的提交,尤其是多选框中,当用户选择了某一项时,禁止其他项的选择.所以为了避免这样的冲突,所以我们前端就得控制一下了,下面就来个简单demo,记录一下,有需要的伙伴可以拿去耍耍 ...
随机推荐
- SQL执行效率和性能测试方法
对于做管理系统和分析系统的程序员,复杂SQL语句是不可避免的,面对海量数据,有时候经过优化的某一条语句,可以提高执行效率和整体运行性能.如何选择SQL语句,本文提供了两种方法,分别对多条SQL进行量化 ...
- strong标签与b标签的区别
关于html标签中b和strong两个的区别. 用在网页上,默认情况下它们起的均是加粗字体的作用,二者所不同的是,<b>标签是一个实体标签,它所包围的字符将被设为bold(粗体),而< ...
- PHP写一段代码，确保多个进程同时写入一个文件成功
这个需求是在软件设计过程常见的加锁.学计算机的同学都应该知道,这个是在<计算机操作系统>课程上有这个知识点.主要要考虑的是进程的同步,也就是进程对资源的互斥访问.OK,用程序说话吧! &l ...
- Hibernate与MyBatis区别
Hibernate是当前主流的ORM框架,对数据库结构提供了较为完整的封装. MyBatis同样也是非常流行的ORM框架,主要在于pojo与SQL之间的映射关系. 区别: 1.两者最大的区别 针对简单 ...
- protobuffer序列化
一. 描述对象的proto文件 第一行package:对象经过protobuffer编译后形成java文件,这个文件放在按照package新建的文件夹内 java_package:java类的包名 j ...
- EntityFramework ,ef 介绍
EntityFramework之领域驱动设计实践 分层架构 在引入实例以前,我们有必要回顾,并进一步了解分层架构.“层”是一种体系结构模式[POSA1],也是被广大软件从业人员用得最为广泛而且最为灵活 ...
- Codeforces Round #367 (Div. 2) Hard problem
Hard problem 题意: 有n个字符串,对第i个字符串进行反转操作代价为ci. 要使n个字符串按照字典序从小到大排列,最小的代价是多少. 题解: 反转就是reverse操作,比如说45873反 ...
- ylbtech-dbs:ylbtech-1,FAM(家庭资产管理系统)
ylbtech-dbs:ylbtech-1,FAM(家庭资产管理系统) -- =============================================-- Family Assets ...
- Redis、Redis+sentinel安装（Ubuntu 14.04下Redis安装及简单测试）
Ubuntu下Redis安装两种安装方式: 1.apt-get方式 步骤: 以root权限登录,切换到/usr目录下. 接下来输入命令,apt-get install redis-server,如图: ...
- js实现的新闻列表垂直滚动实现详解
js实现的新闻列表垂直滚动实现详解:新闻列表垂直滚动效果在大量的网站都有应用,有点自然是不言而喻的,首先由于网页的空间有限,使用滚动代码可以使用最小的空间提供更多的信息量,还有让网页有了动态的效果,更 ...