很久很久以前,我刚听说过JQuery,然后在不知道javaeye还是blogjava上看到一篇《实现select multiple左右添加和删除功能》的文章,写的很黄很暴力,我一紧张就打印下来了,昨天晚上拉肚子上厕所,突然找出打印稿,在厕所上看了一下,发现不错。这个文章的原作者我已经不知道是谁了,但是我要感谢他的奉献精神。
为了表示对他的尊敬,我修改了他的代码,为了更通用。代码例子任然沿用原作者的风格。希望大家喜欢。
源代码附件也有
原文实现select multiple左右添加和删除功能》转载:http://winhonourxzg.iteye.com/blog/342987
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jquery life</title>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<!--下面这个script元素里面包含的代码您再修改一下,可以做为公用的放到您的项目的common.js里面。-->
<script type="text/javascript">
/* initCandidateList: 根据参数初始化候选列表里面的元素*/
function initCandidateList(candidateListId, listLength, preText) {
for (var i = 1; i <= listLength; i++)
{
$("#" + candidateListId).append("<option value='" + i + "'>" + preText + i + "</option>");
}
}
/*attachAddButtonEvent:给add按钮添加事件*/
function attachAddButtonEvent(addButtonId, candidateListId, selectedListId, msg) {
$(function() {
$("#" + addButtonId).click(function() {
if ($("#" + candidateListId + " option:selected").length > 0)
{
$("#" + candidateListId + " option:selected").each(function() {
$("#" + selectedListId).append("<option value='" + $(this).val() + "'>" + $(this).text() + "</option");
$(this).remove();
})
}
else
{
alert(msg);
}
})
})
}
/*attachDeleteButtonEvent:给delet按钮添加事件*/
function attachDeleteButtonEvent(deleteButtonId, candidateListId, selectedListId, msg) {
$(function() {
$("#" + deleteButtonId).click(function() {
if ($("#" + selectedListId + " option:selected").length > 0)
{
$("#" + selectedListId + " option:selected").each(function() {
$("#" + candidateListId).append("<option value='" + $(this).val() + "'>" + $(this).text() + "</option");
$(this).remove();
})
}
else
{
alert(msg);
}
})
})
}
</script>
<!--下面这个script元素里面包含的代码只针对这个页面的功能,就放在这个页面好了。-->
<script type="text/javascript">
$(document).ready(function() {
//first multiple select
initCandidateList('candidate_list', 5, '公开招标小型机采购00');
attachAddButtonEvent('add', 'candidate_list', "select_list", '请选择要添加的分包!');
attachDeleteButtonEvent('delete', 'candidate_list', "select_list", "请选择要删除的分包");
//second multiple select
initCandidateList('candidate_list2', 6, '非公开招标大型机采购');
attachAddButtonEvent('add2', 'candidate_list2', "select_list2", '请选择要添加的分包!');
attachDeleteButtonEvent('delete2', 'candidate_list2', "select_list2", "请选择要删除的分包");
})
</script>
</head>
<body>
<table width="95%" cellpadding="0" align="center" class="listshow" border="1" cellspacing="0">
<tr>
<td colspan="4" align="center">选择第一组分包</td>
</tr>
<tr>
<td class="black" width="30%" align="center" height="150">
<select id="candidate_list" multiple="multiple" style="text-align:center;width:300px;height:150px;">
</select>
</td>
<td align="center" width="5%">
<input type="button" id="add" value="添加>>"/>
<br/>
<br/>
<input type="button" id="delete" value="<<删除"/>
</td>
<td class="black" width="30%" align="center">
<select id="select_list" multiple="multiple" style=" text-align:center;width:300px;height:150px;">
</select>
</td>
</tr>
</table>
<br>
<table width="95%" cellpadding="0" align="center" class="listshow" border="1" cellspacing="0">
<tr>
<td colspan="4" align="center">选择第二组分包</td>
</tr>
<tr>
<td class="black" width="30%" align="center" height="150">
<select id="candidate_list2" multiple="multiple" style="text-align:center;width:300px;height:150px;">
</select>
</td>
<td align="center" width="5%">
<input type="button" id="add2" value="添加>>"/>
<br/>
<br/>
<input type="button" id="delete2" value="<<删除"/>
</td>
<td class="black" width="30%" align="center">
<select id="select_list2" multiple="multiple" style=" text-align:center;width:300px;height:150px;">
</select>
</td>
</tr>
</table>
</body>
</html>
分享到:
相关推荐
《大规模MIMO检测算法VLSI架构——专用电路及动态重构实现》是清华大学刘雷波教授的著作,本书首先分别介绍线性和非线性大规模MIMO检测算法,及对应的专用电路的设计,然后提出并设计大规模MIMO检测可重构处理器,并...
Eclipse中自动重构实现探索 重构代码一词通常是指在不改变代码的外部行为情况下而修改源代码,有时非正式地称为「清理干净」。
数据信号处理matlab,程序实现压缩感知重构过程,仅供参考。
通过一个实例介绍了采用模块化设计方法实现Virtex-E FPGA动态部分重构的过程,能使重构模块在系统运行时改变其逻辑功能,而固定模块逻辑功能不中断,同时器件的重构时间大大减少。 随着可编程技术的不断发展,...
利用MATLAB实现Sa信号的抽样与重构仿真
重构ppt重构ppt重构ppt重构ppt重构ppt重构ppt重构ppt重构ppt重构ppt重构ppt重构ppt重构ppt重构ppt重构ppt重构ppt重构ppt重构ppt重构ppt重构ppt重构ppt重构ppt重构ppt重构ppt重构ppt重构ppt重构ppt
重构重构重构重构重构重构重构重构重构重构
交换两幅图像的幅度谱和相位谱,并实现双谱重构!附有源代码和实验结构图。
r重构r重构r重构r重构r重构r重构r重构r重构r重构
基于泊松方程实现点云的表面重构
以一个简单mvc模型开始,一步步重构,封装,最终实现struts的雏形,更加深入的理解struts的基本思想
ZYNQ 实现PL动态重构
压缩感知OMP重构算法matlab实现,OMP重构算法,本程序用于重构原始图像
应用Ajax实现的级联省市,目前实现二级级联,可以根据需求自己添加。Ajax的重构使代码少量化,简单化,可读性大大提高。使用时,请使用Myeclipse+tomcat打开,因为涉及到servlet的应用。
源码介绍:用于信号的分解、降噪和重构,实现故障诊断 源码说明: 全部项目源码都是经过测试校正后百分百成功运行的,如果您下载后不能运行可联系我进行指导或者更换。 适合人群:新手及有一定经验的开发人员
程序可实现图像的小波分解和重构,严格按照2:1比例分解和重构,避免了MATLAB软件提供的小波函数不是2:1抽样的缺点。
matlab实现一维和二维离散小波变换,以及小波的重构,同时有代码实现的截图和各种系数重构的二范式比较
使用matlab来实现非正交二次样条二维二进小波的快速分解和重构 编程实现例7.4中可分离二维二进小波的快速分解与重构算法 算法实现 使用matlab来实现非正交二次样条二维二进小波的快速分解和重构,实现的函数...
FPGA局部动态可重构技术的特征是将整体按功能或按时序分解为不同的组合,并根据实际需要,分时对芯片进行局部动态重构,以较少的硬件资源实现较大的时序系统整体功能