实现两个select list box间item的移动和过滤
<head>
<title>
</title>
<!--Standard jQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-git2.js" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#boxClear').click(function(){
$('#firstFilterSearch').val('');
}); $('#firstFilterSearch').keyup(function()
{
var searchArea = $('#firstList');
searchFirstList($(this).val(), searchArea);
}); $('#firstList').dblclick(function() {
assignList();
}); $('#secondList').dblclick(function() {
unassignList();
}); $('#to2').click(function()
{
assignList();
}); $('#to1').click(function()
{
unassignList();
});
}); // Function for Filtering
function searchFirstList(inputVal, searchArea)
{
var allCells = $(searchArea).find('option');
if(allCells.length > 0)
{
var found = false;
allCells.each(function(index, option)
{
var regExp = new RegExp(inputVal, 'i');
if(regExp.test($(option).text()))
{
$(option).show();
}
else
{
$(option).hide();
}
});
}
} // function: UnAssignment
function assignList()
{
$('#firstList :selected').each(function(i, selected){
// append to second list box
$('#secondList').append('<option value="'+selected.value+'">'+ selected.text+'</option>');
// remove from first list box
$("#firstList option[value='"+ selected.value +"']").remove();
});
}
// function: UnAssignment
function unassignList()
{
$('#secondList :selected').each(function(i, selected){
// append to first list box
$('#firstList').append('<option value="'+selected.value+'">'+ selected.text+'</option>');
// remove from second list box
$("#secondList option[value='"+ selected.value +"']").remove();
});
}
</script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="100%">
<form id="frm_format" method="" action="">
<table cellpadding="0" id="tbl_format"cellspacing="0" border="0" width="100%" class="standard_table_v4">
<thead>
</thead>
<tbody>
<tr>
<td>
<td align="center">
Filter: <input id="firstFilterSearch" type="text">
<input type="button" id="boxClear" name="boxClear" value="Cancel"><br>
<select id="firstList" multiple="multiple" style="height:420px;width: 250px;" >
<option value="1">PHP</option>
<option value="2">.Net</option>
<option value="3">Copy</option>
<option value="4">Paste</option>
<option value="5">Pea</option>
<option value="6">Pamp</option>
<option value="7">ladaku</option>
<option value="8">Zebra</option>
</select>
</td>
<td align="center">
<input id="to2" type="button" name="to2" title='assign' value=">" /><br/><br/>
<input id="to1" type="button" name="to1" title='unassign' value="<">
</td>
<td>
<select id="secondList" multiple="multiple" style="height:420px;width: 250px;" >
</select>
</td>
</tr>
</tbody>
</table>
</form> </td>
</tr>
</table>
</body>
</html>
实现两个select list box间item的移动和过滤的更多相关文章
- jQuery获取Radio选择的Value值||两个select之间option的互相添加操作(jquery实现)
jQuery获取Radio选择的Value值: 1. $("input[name='radio_name'][checked]").val(); //选择被选中Radio的Val ...
- JSF 2 multiple select dropdown box example
In JSF, <h:selectManyMenu /> tag is used to render a multiple select dropdown box – HTML selec ...
- oracle中，将两个select语句的结果作为一个整体显示出来
如果我们需要将两个select语句的结果作为一个整体显示出来,我们就需要用到union或者union all关键字.union(或称为联合)的作用是将多个结果合并在一起显示出来.union和union ...
- 2017 年 9 月 27 日 js(1.两个select 内容互换 2.单选按钮 同意可点击下一步 3. 全选框)
1.两个select 内容互换 <!DOCTYPE html><html> <head> <meta charset="UTF- ...
- Mysql中两个select语句的连接
Mysql中两个select语句连接需要用到操作符 SQL UNION 操作符 UNION 操作符用于合并两个或多个 SELECT 语句的结果集. 请注意,UNION 内部的 SELECT 语句必须拥 ...
- 两个Select 之间的值的传递
运行效果: 下面是代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML ...
- 左右两个Select列表框交换数据的JS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD ...
- SQL语句里合并两个select查询结果
SQL UNION 操作符UNION 操作符用于合并两个或多个 SELECT 语句的结果集. 请注意,UNION 内部的 SELECT 语句必须拥有相同数量的列.列也必须拥有相似的数据类型.同时,每条 ...
- jQuery：实现两个<select>控件的互移操作
一.直接上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...
随机推荐
- [uva11916] Emoogle Grid (离散对数)
转载请注明出处: http://www.cnblogs.com/fraud/ ——by fraud Emoogle Grid You have to color an MxN ( ...
- struts2.x中因变量命名错误不被注入到值栈的问题
//I declare... private String aBC="abc"; Then I Alt+Shift+R and S(Generate Getter/Setter) ...
- 关于"zoom“ 的一点小认识
最早接触zoom是在清除浮动的时候,原因就是zoom能触发IE的haslayout,当时也没深究其原理,今天,在查看张鑫旭的对overflow与zoom”清除浮动”的一些认识时,其中提到zoom是比例 ...
- [C++程序设计]用指向数组的指针作函数参数
#include <iostream> using namespace std; int main() { ]); ][]={,,,,,,,,,,,}; output(a); ; } ]) ...
- django获取某一个字段的列表，values/values_list/flat
class Building(models.Model): corporation = models.ForeignKey('company.Corporation', verbose_name=u' ...
- MySQL--mysqldump的权限说明
mysqldump 所需要的权限说明: 1.对于table 来说mysqldump 最少要有select 权限. 2.对于view 来说mysqldump 要有show view 权限. 3.对于tr ...
- Scheme 编程环境的设置(racket/petite)-王垠
Scheme 编程环境的设置 http://www.yinwang.org/blog-cn/2013/04/11/scheme-setup/ sudo apt-get insatll racket ; ...
- 关于在Reshaper中添加代码模板代码段
http://www.cnblogs.com/tristinjet/archive/2009/08/19/1550203.html 去 tools->模板中进行模板编辑设置
- 【在Windows下进行的编程人员，你真的需要学习下Linux】
从业几年,发现好多编程人员,严重依赖UI工具.对一些命令操作,十分的反感.尤其是从事Windows系统中的程序开发的人员.由于微软对开发工具,编程套件的极限优化.开发出更多的 面向UI的开发工具.从V ...
- Linux下编译boost库和qt和ImageMagick
需要把整个PCIE的工程移植到Linux下,当初就是用cmake来管理的工程的.但是命令行之类的还是需要改动.改动还不少,cmake里面很多东西都依赖于windows.包括我用cmake重新管理的工程 ...