做项目的时候要用到的一个小功能,以前做过的,用的纯JS,今天翻出来看发现只能在IE中运行的,自己改成jquery的了,该功能很常见,不过一直不知道他的学名叫什么,所以也就随便起个了,大家看下面的图都应该知道了:
<!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>select列表双向选择</title>
<style type="text/css">
select
{
width: 100%;
height: 160px;
}
div
{
float: left;
}
#div1, #div3
{
width: 150px;
}
#div2
{
width: 120px;
}
.btn
{
display: block;
margin: 10px auto;
width: 80px;
}
</style>
</head>
<body>
<div id="div1">
<select id="dltSource" name="dltSource" size="10" multiple="multiple">
<option value="苹果">苹果</option>
<option value="雪梨">雪梨</option>
<option value="西瓜">西瓜</option>
<option value="荔枝">荔枝</option>
<option value="龙眼">龙眼</option>
<option value="香蕉">香蕉</option>
</select>
</div>
<div id="div2">
<input type="button" value=">" class="btn" onclick="Add($('#dltSource'),$('#dltTarget'))" />
<input type="button" value=">>" class="btn" onclick="AddAll($('#dltSource'),$('#dltTarget'))" />
<input type="button" value="<" class="btn" onclick="Add($('#dltTarget'),$('#dltSource'))" />
<input type="button" value="<<" class="btn" onclick="AddAll($('#dltTarget'),$('#dltSource'))" />
</div>
<div id="div3">
<select id="dltTarget" name="dltTarget" size="10" multiple="multiple">
</select>
</div>
</body>
</html>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
/* 添加选择的项 */
function Add(ObjSource, ObjTarget) {
if(ObjSource.val() ==null) return; // 如果没有选择则退出函数,无这句话的话IE6会报错
$.each(ObjSource.val(), function(i, n) { // 循环原列表中选中的值,依次添加到目标列表中
var html = "<option value='" + n + "'>" + n + "</option>";
ObjTarget.append(html);
});
ObjSource.find("option:selected").remove(); // 原列表中选中的值删除
}
/* 添加全部 */
function AddAll(ObjSource, ObjTarget) {
ObjTarget.append(ObjSource.html()); // 目标列表的HTML加上原列表的所有HTML
ObjSource.empty(); // 原列表清空
}
</script>
分享到:
相关推荐
看着标题就知道它是什么意思了,select列表双向选择,jquery制作的,兼容性肯定是不错的
jQuery下拉列表框双向选择 jQuery下拉列表框双向选择 jQuery下拉列表框双向选择 jQuery下拉列表框双向选择 jQuery下拉列表框双向选择
jQuery select双向选择列表菜单代码 jQuery select双向选择列表菜单代码
jQuery实现列表框双向选择操作,实现左侧文本框多选后放入右侧文本框
jquery select列表选择框选中美化效果源码
A_jquery+select框图片选择器点击图片给表单select框赋值Java实用源码整理learns
jquery.selectbox.js select下拉菜单美化代码 jquery.selectbox.js select下拉菜单美化代码 jquery.selectbox.js select下拉菜单美化代码
Jquery模拟select效果实现,纯自写,简单实用,可自行修改样式。
jquery制作双向选择移动器特效
工作中用select总是遇到很多问题,例如经常出现select无法被div等元素遮盖,我想用其他元素模拟select可能会更好,最近刚学jquery,于是就写了个效果来模拟,顺便练习下,代码很冗长,希望大家多拍砖。
jquery input文本框模拟select选择框获取选定 jquery input文本框模拟select选择框获取选定 jquery input文本框模拟select选择框获取选定
jQuery Checkbox列表双向选择移动代码,通过点击左右箭头按钮可以分别将两边div块中复选框已选中的列表项目在两边来回移动。
下拉模糊查询 jQuery-select 下拉模糊查询 jQuery-select 下拉模糊查询 jQuery-select 下拉模糊查询 jQuery-select 下拉模糊查询 jQuery-select 下拉模糊查询 jQuery-select
一个带下拉模糊搜索的select,替换下拉内容后即可直接使用,只需要把对应文件放到指定文件夹中引用即可
简单实用的jquery select2组件
jquery双向选择器两侧select框列表文字左右选择器代码
jQuery select双向选择菜单,可添加删除所选菜单。
jquery双向选择器代