2个select之间的移动,分单个移动和全部移动,
本文来自尚观知识库】 2个select之间的移动,分单个移动和全部移动,
具体情况如下:
样式如下(类似而已,呵呵):
a k
b >> l
c m
d >
e
f <<
g
h <
i
<script language="javascript">
function add(){
var opt=selectfrom.options;
len=opt.length;
for(i=len-1;i>-1;i--){
if(opt[i].selected){
select2.appendChild(opt[i]);
}
}
}
function addAll(){
var opt=selectfrom.options;
len=opt.length;
for(i=len-1;i>-1;i--){
select2.appendChild(opt[i]);
}
}
function del(){
var opt=select2.options;
len=opt.length;
for(i=len-1;i>-1;i--){
if(opt[i].selected){
selectfrom.appendChild(opt[i]);
}
}
}
function delAll(){
var opt=select2.options;
len=opt.length;
for(i=len-1;i>-1;i--){
selectfrom.appendChild(opt[i]);
}
}
</script>
<body>
<table width="27%" height="194" border="0" cellpadding="1" cellspacing="0">
<tr>
<td width="21%"><select id="selectfrom" size="15" multiple="multiple" style="width:100px">
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
<option>e</option>
<option>f</option>
<option>g</option>
<option>h</option>
<option>i</option>
<option>j</option>
<option>k</option>
<option>j</option>
<option>m</option>
<option>n</option>
</select></td>
<td width="57%"><p align="center">
<input name="addAll" type="button" id="addAll" value=" >> " style="width:40px" onclick="addAll()"/>
</p>
<p align="center">
<input name="add" type="button" id="add" style="width:40px" value=" > " onclick="add()"/>
</p>
<p align="center">
<input name="del" type="button" id="del" value=" < " style="width:40px" onclick="del()"/>
</p>
<p align="center">
<input name="delAll" type="button" id="delAll" value=" << " style="width:40px" onclick="delAll()"/>
</p></td>
<td width="22%"><select id="select2" size="15" multiple="multiple" style="width:100px">
</select></td>
</tr>
</table>
分享到:
相关推荐
从一个select 选中数据后移动到另一个select框中
select选择框内容左右移动添加删除代码基于jquery-1.8.3.min.js实现,简单实用,选中选项内容,点击移动按钮可进行内容左右移动,双击option内容也可左右移动,支持单选移动、多选移动和一键全部移动!
select选择框内容左右移动源码,请大家参考。
处理option的移动事件,很多人不知道的option的移动事件怎么处理。
对select框内元素上下移动排序
两个 select 下拉框中的数据相互移动
实现两个select之间内容的互换实测通过,很好用
类似word选项的左移右移功能 经典list 到 list 的移动,并且支持上移和下移。 大家学习学习。
enter键控制input光标移动,通过判断是否是最后一个input输入框来决定是继续向下跳还是跳到第一个input输入框
本篇文章主要是对两个select多选模式的选项相互移动示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
使用jquery技术实现 两个select之间option的转移操作,支持全选、单选、删除操作,代码简单,功能强大,拿过来就能用哦!内附效果截图
仿苹果select jquery 插件,可用于手机端
Select上移下移 jQuerySelect jQuerySelect移动 Select上下移动
选中左侧项目移动到右侧,jquery实现,包内没有jquery请自己下载
两个相关联的select,一个select的选择会影响另一个select的输出结果
NULL 博文链接:https://yuxingxing1988.iteye.com/blog/1090351
app手机端使用mobileSelect插件手动选择省市区
jquery select2 select美化插件
具有单个和多个功能的Angular选择库。 npm install --save @jaspero/ng-select 演示可以在找到 设置 进口JasperoSelectModule在@NgModule : @ NgModule ( { imports : [ JasperoSelectModule ] , ...