两个多选框(select)之间值的左右上下移动
两个多选框(select)之间值的左右上下移动
两个多选框（select）之间值的左右上下移动的代码请参考：
<html>
<head>
<title>MultiSelects </title>
<script type="text/javascript" src=" http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>
<script>
<!--
$（function（）{
$（"#s1 option:first,#s2 option:first"）。attr（"selected",true）；
$（"#s1"）。dblclick（function（）{
var alloptions = $（"#s1 option"）；
var so = $（"#s1 option:selected"）；
if（so === null || so == "undefined"）{
return;
}
try{
var a = （so.get（so.length-1）。index == alloptions.length-1）？ so.prev（）。attr（"selected",true）：so.next（）。attr（"selected",true）；
}catch（e）{
return;
}
$（"#s2"）。append（so）；
}）；
$（"#s2"）。dblclick（function（）{
var alloptions = $（"#s2 option"）；
var so = $（"#s2 option:selected"）；
if（so === null || so == "undefined"）{
return;
}
try{
var a = （so.get（so.length-1）。index == alloptions.length-1）？ so.prev（）。attr（"selected",true）：so.next（）。attr（"selected",true）；
}catch（e）{
return;
}
$（"#s1"）。append（so）；
}）；
$（"#add"）。click（function（）{
var alloptions = $（"#s1 option"）；
var so = $（"#s1 option:selected"）；
var a = （so.get（so.length-1）。index == alloptions.length-1）？ so.prev（）。attr（"selected",true）：so.next（）。attr（"selected",true）；
$（"#s2"）。append（so）；
}）；
$（"#remove"）。click（function（）{
var alloptions = $（"#s2 option"）；
var so = $（"#s2 option:selected"）；
var a = （so.get（so.length-1）。index == alloptions.length-1）？ so.prev（）。attr（"selected",true）：so.next（）。attr（"selected",true）；
$（"#s1"）。append（so）；
}）；
$（"#addall"）。click（function（）{
$（"#s2"）。append（$（"#s1 option"）。attr（"selected",true））；
}）；
$（"#removeall"）。click（function（）{
$（"#s1"）。append（$（"#s2 option"）。attr（"selected",true））；
}）；
$（"#s1up"）。click（function（）{
var so = $（"#s1 option:selected"）；
if（so.get（0）。index!==0）{
so.each（function（）{
$（this）。prev（）。before（$（this））；
}）；
}
}）；
$（"#s1down"）。click（function（）{
var alloptions = $（"#s1 option"）；
var so = $（"#s1 option:selected"）；
if（so.get（so.length-1）。index!=alloptions.length-1）{
for（i=so.length-1;i>=0;i=1-1）
{
var item = $（so.get（i））；
item.insertAfter（item.next（））；
}
}
}）；
$（"#s2up"）。click（function（）{
var so = $（"#s2 option:selected"）；
if（so.get（0）。index!==0）{
so.each（function（）{
$（this）。prev（）。before（$（this））；
}）；
}
}）；
$（"#s2down"）。click（function（）{
var alloptions = $（"#s2 option"）；
var so = $（"#s2 option:selected"）；
if（so.get（so.length-1）。index!=alloptions.length-1）{
for（i=so.length-1;i>=0;i--）
{
var item = $（so.get（i））；
item.insertAfter（item.next（））；
}
}
}）；
}）；
-->
</script>
</head>
<body>
<table width="288" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="29">
<input type="button" name="s1up" id="s1up" value="up" /><br />
<input type="button" name="s1down" id="s1down" value="down"/>
</td>
<td width="100">
<select name="s1" size="10" multiple="multiple" id="s1" style=" width:100px;">
<option value="opt01">option01</option>
<option value="opt02">option02</option>
<option value="opt03">option03</option>
<option value="opt04">option04</option>
<option value="opt05">option05</option>
<option value="opt06">option06</option>
<option value="opt07">option07</option>
<option value="opt08">option08</option>
<option value="opt09">option09</option>
<option value="opt10">option10</option>
</select>
</td>
<td width="37" align="center"><input type="button" name="addall" id="addall" value=">|" /><br /><input type="button" name="add" id="add" value=">>" /><br /><input type="button" name="remove" id="remove" value="<<" /><br /><input type="button" name="removeall" id="removeall" value="|<" /></td>
<td width="100"><select name="s2" size="10" multiple="multiple" id="s2" style=" width:100px;">
</select></td>
<td width="119">
<input type="button" name="s2up" id="s2up" value="up" /><br />
<input type="button" name="s2down" id="s2down" value="down" /></td>
</tr>
</table>
</body>
</html>
博洋教育( http://www.softfz.com/ )教师简介：陈丽萍，高级java讲师，7年教学经验。
J2EE资深开发工程师，6年软件开发经验。主要从事JAVA EE 平台技术的应用开发, 对JAVA EE体系构架理解透彻，基础扎实，掌握面向对象理念。对主流框架如Struts、Spring、Hibernate以及AJAX等技术具备成熟的开发经验。
两个多选框(select)之间值的左右上下移动相关推荐
- jq 如何获取多选框选中的值
jquery如何获取多选框选中的值,有两种方法 1.通过id获取是否选中(单个) 1)引入jquery文件 2)Html设计如下 <div><span>运动类:</spa ...
- php复选框如何选取值,php判断复选框值是否被选中的方法
码农公社 210.net.cn 210是何含义?10月24日是程序员节,1024 =210.210既 210 之意. php判断复选框值是否被选中的方法 本文介绍两个知识点: 1.如何获取复选框c ...
- layui复选框怎么取值_layui获取多选框中的值方法
layui获取多选框中的值方法 HTML: title="=$value;?>"> js: $("input:checkbox[name='standard' ...
- MFC两个复选框互斥设置
MFC两个复选框互斥设置 下面是两个复选框,我们想要做到只能选择一个,并且点击其中一个自动关闭另一个,并且不像别的示例所做的点击其中一个另一个直接不能点击,这种方法的话可以随时修改,比较方便 下面是第 ...
- ajax传递复选框的参数,ajax将table复选框的数组值传递到后台
//头工具栏事件 table.on('toolbar(gv_SalesOrderInfo)', function (obj) { debugger; var ItemId = []; var chec ...
- js怎么获取复选框选中的值
本篇文章主要给大家介绍js获取复选框选中的值的实现方法. js获取复选框选中的值的方法实现,对于新手小白来说可能有一定的难度. 下面我们就结合具体的代码示例为大家详细介绍js实现获取复选框中选中的值的 ...
- layui复选框怎么取值_layui如何获取checkbox复选框的值
layui如何获取checkbox复选框的值 发布时间:2020-10-21 17:07:09 来源:亿速云 阅读:164 作者:Leah 本篇文章给大家分享的是有关layui如何获取checkbox ...
- layui复选框怎么取值_layui获取checkbox复选框值
获取layui表单复选框已选中的数据 HTML layui.form.checkbox 获取选中 复选框 开关关 开关开 立即提交 JS layui.use('form', function(){ v ...
- layui复选框勾选取值
1.本次做页面的时候要用到复选框,并且勾选不同的复选框要展示不同的输入项,这就需要判断到底是勾选了那个.如下是我的页面实现. <div class="layui-form-item&q ...
最新文章
- push代码到github时，每次都要输入用户名和密码的问题
- 全国计算机等级考试c语言程序设计真题,历年全国计算机等级考试二级C语言笔试选择真题...
- 快速排序（quick sort）
- MapReduce的构思和框架结构
- 「雕爷学编程」Arduino动手做（22）——8X8 LED点阵MAX7219屏
- Linux 系统服务漏洞PwnKit 已存在12年，可获得所有主流发布版本的root 权限
- c语言商品管理系统文件,c语言商品管理系统(文件应用).doc
- 2015 ccpc 南阳国赛
- 我的天！！线上千万级大表排序，如何优化？
- Java String 类型对象不能改变
- 维护2G网络的稳定必须提升到战略高度
- 【详细】MySQL之游标
- 红外视觉1：近红外与中远红外图像
- 基于springboot老年人健康体检系统（带论文）
- golang 微信小程序登录
- Illustrator CS5序列号
- C语言程序设计现代方法（第二版）十二章编程题答案
- oracle 11g Data Guard物理备份库
- rust vapo_考研英语翻译技巧
- 堆栈指针寄存器 SP详解以及栈的作用