当前位置：移动技术网 > IT编程>开发语言>JavaScript > js select多选列表传值代码

js select多选列表传值代码

2019年07月19日 | 移动技术网IT编程 | 我要评论

<html> 
<head> 
<title>js select</title> 
 
</head> 
<body> 
<form name="form1" method="post" action=""> 
<table border="0" align="center" width="75%" cellspacing="0" cellpadding="0"> 
<tr> 
<td> 
<table border="0" align="center"> 
<tr> 
<td> 
<select name="leftitem" style="width:200px" size="10" multiple="multiple"> 
<option value="1">item1 
<option value="2">item2 
<option value="3">item3 
<option value="4">item4 
<option value="5">item5 
</select> 
</td> 
</tr> 
</table> 
</td> 
<td> 
<table border="0" align="center"> 
<tr><td height="30"><input type="button" name="button1" style="width:50px" value=">" onclick="fmoveselectedoptionslefttoright(document.all.leftitem,document.all.rightitem)"></td></tr> 
<tr><td height="30"><input type="button" name="button2" style="width:50px" value=">>" onclick="fmovealloptionslefttoright(document.all.leftitem,document.all.rightitem)"></td></tr> 
<tr><td height="30"><input type="button" name="button3" style="width:50px" value="<" onclick="fmoveselectedoptionsrighttoleft(document.all.leftitem,document.all.rightitem)"></td></tr> 
<tr><td height="30"><input type="button" name="button4" style="width:50px" value="<<" onclick="fmovealloptionsrighttoleft(document.all.leftitem,document.all.rightitem)"></td></tr> 
</table> 
</td> 
<td> 
<table border="0" align="center"> 
<tr> 
<td> 
<select name="rightitem" style="width:200px" size="10" multiple="multiple"> 
</select> 
</td> 
</tr> 
</table> 
</td> 
</tr> 
</table> 
<table border="0" align="center"> 
<tr height="40"> 
<td><input type="button" value="保存" onclick="checkform()"></td> 
</tr> 
</table> 
</form> 
</body> 
</html>

[ctrl+a 全选注:如需引入外部js需刷新才能执行]

js核心代码

复制代码代码如下:

/*移除左边选中的列表项到右边*/ 
function fmoveselectedoptionslefttoright(oleft,oright) 
{ 
if(!(oleft&&oright)) 
{ 
return; 
} 
if(!hasoptions(oleft)) 
{ 
return; 
} 
if(oleft.selectedindex==-1) 
{ 
oleft.selectedindex=0; 
} 
for(var i=0;i<oleft.options.length;i++) 
{ 
if(oleft.options[i].selected) 
{ 
var ooption = document.createelement("option"); 
ooption.setattribute("text",oleft.options[i].text); 
ooption.setattribute("value",oleft.options[i].value); 
oright.add(ooption); 
} 
} 
clearselectedoptions(oleft); 
} 
/*移除左边的所有列表项到右边*/ 
function fmovealloptionslefttoright(oleft,oright) 
{ 
if(!(oleft&&oright)) 
{ 
return; 
} 
if(!hasoptions(oleft)) 
{ 
return; 
} 
for(var i=0;i<oleft.options.length;i++) 
{ 
var ooption = document.createelement("option"); 
ooption.setattribute("text",oleft.options[i].text); 
ooption.setattribute("value",oleft.options[i].value); 
oright.add(ooption); 
} 
clearalloptions(oleft); 
} 
/*移除右边选中的列表项到左边*/ 
function fmoveselectedoptionsrighttoleft(oleft,oright) 
{ 
if(!(oleft&&oright)) 
{ 
return; 
} 
if(!hasoptions(oright)) 
{ 
return; 
} 
if(oright.selectedindex==-1) 
{ 
oright.selectedindex=0; 
} 
for(var i=0;i<oright.options.length;i++) 
{ 
if(oright.options[i].selected) 
{ 
var ooption = document.createelement("option"); 
ooption.setattribute("text",oright.options[i].text); 
ooption.setattribute("value",oright.options[i].value); 
oleft.add(ooption); 
} 
} 
clearselectedoptions(oright); 
} 
/*移除右边的所有列表项到左边*/ 
function fmovealloptionsrighttoleft(oleft,oright) 
{ 
if(!(oleft&&oright)) 
{ 
return; 
} 
if(!hasoptions(oright)) 
{ 
return; 
} 
for(var i=0;i<oright.options.length;i++) 
{ 
var ooption = document.createelement("option"); 
ooption.setattribute("text",oright.options[i].text); 
ooption.setattribute("value",oright.options[i].value); 
oleft.add(ooption); 
} 
clearalloptions(oright); 
} 
/*清空select所有options*/ 
function clearalloptions(oselect) 
{ 
if(oselect) 
{ 
var ops=oselect.options; 
while(ops.length>0) 
{ 
oselect.remove(ops.length-1); 
} 
} 
} 
/*清空select所有选中的options*/ 
function clearselectedoptions(oselect) 
{ 
if(oselect) 
{ 
for(var i=0;i<oselect.options.length;i++) 
{ 
if(oselect.options[i].selected) 
{ 
oselect.remove(i--); 
} 
} 
} 
} 
/*判断select是否有options*/ 
function hasoptions(oselect) 
{ 
if(oselect) 
{ 
return oselect.options.length>0; 
} 
return false; 
} 

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

JS--常见面试题整理(附答案）

一.JS面试题1.当a=?时，可以让a同时满足a1,a2,a==3,并输出ok方法一let a=[1,2,3];... [阅读全文]
javascript的短路机制和几种数值取整的方法

1. javascript的短路机制1.1 且运算符（&&）往往用于多个表达式的求值。它的运算规... [阅读全文]
jQuery50个选择器,让你得心应手

jQuery一:概念一个简单的js组件(是一个别人写好的js文件不是jar包)引入jQuery文件<scr... [阅读全文]
JavaScript 好题汇总分享（持续更新，看到好题就写）

前言本文搜集的题目，均来自各大网课、面试题等预编译相关1a = 100;function demo(e) {fu... [阅读全文]
JS中的原型与原型链图解

原型每一个构造器（函数）上面都有一个属性叫prototype，称为原型。它的值是一个对象，这个对象我们称为原型对... [阅读全文]
XMLHttpRequest 2级 &&进度事件&&JSONP

XMLHttpRequest 2级FormDataFormData 为序列化表单以及创建与表单格式相同的数据（... [阅读全文]
XMLHttpRequest对象

AJAX简介AJAX = 异步 JavaScript 和 XML；是一种用于创建快速动态网页的技术。通过在... [阅读全文]
mock入门学习

mockjs入门学习,自动生成数据官网入口：http://mockjs.com/安装：npm i mockjs ... [阅读全文]
使用递归原生实现拷贝&&最简单的方法实现深拷贝

<script> // 第一种:最简单的方法,一行代码实现 JSON.p... [阅读全文]
【剑指 Offer 45】把数组排成最小的数

输入一个非负整数数组，把数组里所有数字拼接起来排成一个数，打印能拼接出的所有数字中最小的一个。示例 1:输入: ... [阅读全文]

网友评论


验证码：

js select多选列表传值代码

2019年07月19日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论