js简单实现Select互换数据的方法
作者:企鹅 时间:2023-07-20 00:50:46
本文实例讲述了js简单实现Select互换数据的方法。分享给大家供大家参考。具体如下:
这里基于javascript实现两个Select互换数据,简单实用,大家都见到过的,不多说了,即使手头暂时用不上,收藏起来,以备后用。
运行效果如下图所示:
在线演示地址如下:
http://demo.jb51.net/js/2015/js-select-cha-data-codes/
具体代码如下:
<title>两个Select互换数据,简单实用</title>
<script language="JavaScript">
var MainSel = null;
var SlaveSel = null;
var Item_org = new Array();function DoAdd(){
var this_sel = null;
for(var i=0;i<MainSel.options.length;i++){
this_sel = MainSel.options[i];
if(this_sel.selected){
SlaveSel.appendChild(this_sel);
i--;
}
}
sort_Main(SlaveSel);
}function DoDel(){
var this_sel = null;
for(var i=0;i<SlaveSel.options.length;i++){
this_sel = SlaveSel.options[i];
if(this_sel.selected){
MainSel.appendChild(this_sel);
i--;
}
}
sort_Main(MainSel);
}function sort_Main(the_Sel){
var this_sel = null;
for(var i=0;i<Item_org.length;i++){
for(var j=0;j<the_Sel.options.length;j++){
this_sel = the_Sel.options[j];
if(this_sel.value==Item_org[i][0] && this_sel.text==Item_org[i][1]){
the_Sel.appendChild(this_sel);
}
}
}
}window.onload=function(){
MainSel = select1;
SlaveSel = select2;
MainSel.ondblclick=DoAdd;
SlaveSel.ondblclick=DoDel;
var this_sel = null;
for(var i=0;i<MainSel.options.length;i++){
this_sel = MainSel.options[i];
Item_org.push(new Array(this_sel.value,this_sel.text));
}
}
</script>
<table width="300" border="0" cellspacing="0" cellpDoAdding="0" align="center">
<tr>
<td width="45%" align="center">
<select id="select1" size="5" multiple style="width: 100px">
<option value="111">111</option>
<option value="222">222</option>
<option value="333">333</option>
<option value="444">444</option>
<option value="555">555</option>
<option value="666">666</option>
</select>
</td>
<td width="10%" align="center">
<input name="DoAdd" type="button" value=">>" onClick="DoAdd()"><br>
<input name="DoDel" type="button" value="<<" onClick="DoDel()">
</td>
<td width="45%" align="center">
<select id="select2" size="5" multiple style="width: 100px">
</select>
</td>
</tr>
</table>
希望本文所述对大家的javascript程序设计有所帮助。
标签:js,Select,互换
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
原生JS下拉加载插件分享
2024-04-29 13:42:35
![](https://img.aspxhome.com/file/2023/7/132587_0s.png)
如何将pytorch模型部署到安卓上的方法示例
2023-03-15 15:12:12
![](https://img.aspxhome.com/file/2023/2/113132_0s.png)
Go中过滤范型集合性能示例详解
2024-04-27 15:27:35
python+pygame实现坦克大战
2023-12-04 10:52:38
![](https://img.aspxhome.com/file/2023/9/124229_0s.jpg)
怎样开启phpStudy服务器
2023-05-25 00:38:06
django连接mysql配置方法总结(推荐)
2024-01-26 21:50:50
python中from module import * 的一个坑
2021-10-29 08:23:51
SQL Server管理 这些你懂吗?
2011-07-01 13:40:23
pytorch 使用半精度模型部署的操作
2022-04-17 21:33:36
python程序的组织结构详解
2023-06-14 12:23:09
![](https://img.aspxhome.com/file/2023/7/134747_0s.png)
python基于gevent实现并发下载器代码实例
2024-01-01 00:31:53
python中wx将图标显示在右下角的脚本代码
2022-10-27 02:26:53
一步一步教你创建SQL 2005计划任务应用图解教程
2024-01-18 10:34:30
![](https://img.aspxhome.com/file/2023/9/102069_0s.jpg)
Python报错:ModuleNotFoundError的解决办法
2023-02-19 10:53:09
![](https://img.aspxhome.com/file/2023/4/111984_0s.png)
css reset中的list-style:none
2010-05-26 13:56:00
![](https://img.aspxhome.com/file/UploadPic/20105/26/01-62s.jpg)
Go语言使用swagger生成接口文档的方法
2023-08-28 06:23:23
![](https://img.aspxhome.com/file/2023/4/100794_0s.jpg)
解决vue中less的使用问题
2024-05-03 15:11:05
![](https://img.aspxhome.com/file/2023/7/130197_0s.png)
Python实现批量下载图片的方法
2022-11-17 07:20:08
python操作日期和时间的方法
2021-08-29 18:32:59
IE 浏览器安全级别详情及区别小结
2022-05-28 20:24:16