js 操作option上下,左右移动
关键词:js 操作option上下,左右移动
查看效果:js 操作option上下,左右移动
代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>select多项选择,上下操作,左右移动操作</title>
<script language="JavaScript">
function copyToList(from,to) //from表示:包含可选择项目的select对象名字 to表示:列出可选择项目的select对象名字 //你可以根据你的具体情况修改
{
// var fromList =document.forms[0] +'.'+ from;
// var toList =document.forms[0]+'.'+ to;
var fromList = document.getElementById(from);
var toList =document.getElementById(to);
if (toList.options.length > 0 && toList.options[0].value == 'temp')
{
toList.options.length = 0;
}
var sel = false;
for (i=0;i<fromList.options.length;i++)
{
var current = fromList.options[i];
if (current.selected)
{
sel = true;
if (current.value == 'temp')
{
alert ('这个是空的!');
return;
}
txt = current.text;
val = current.value;
toList.options[toList.length] = new Option(txt,val);
fromList.options[i] = null;
i--;
}
}
if (!sel) alert ('你还没有选择任何项目');
}
function allSelect() //这是当用户按下提交按钮时,对列出选择的select对象执行全选工作,让递交至的后台程序能取得相关数据
{
List = document.forms[0].chosen;
if (List.length && List.options[0].value == 'temp') return;
for (i=0;i<List.length;i++)
{
List.options[i].selected = true;
}
}
function updown(formname,type)
{var tempid;
var formname = document.getElementById(formname);
if(formname.options.length>2)
{
for (tempid = 0;tempid < formname.options.length;tempid++)
{ var current = formname.options[tempid];
if (current.selected)
{
if(type == 'up' )
{
if (tempid == 0)
{return;}
newid = tempid-1;
}
else
{
if(tempid == (formname.options.length-1))
{return;}
newid = tempid+1;
}
tempchangetext = current.text;
tempchangeval = current.value;
current.text = formname.options[newid].text;
current.value = formname.options[newid].value;
formname.options[newid].text = tempchangetext;
formname.options[newid].value = tempchangeval;
formname.options[tempid].selected = false;
formname.options[newid].selected = true;
return;
}
}
}
}
</script>
</head>
<body>
<table border="0"> <form onSubmit="allSelect()">
<tr>
<td>
<select id="possible" size="4" MULTIPLE width=200 style="width: 200px">
<option value="1">多选1</option>
<option value="2">多选2</option>
<option value="3">多选3</option>
<option value="4">多选4</option>
</select>
</td>
<td><a href="javascript:copyToList('possible','chosen')">添加至右方→</a><br>
<br>
<a href="javascript:copyToList('chosen','possible')">←添加至左方</a></td>
<td>
<select id="chosen" size="4" MULTIPLE width=200 style="width: 200px;">
<option value="temp">从左边选择你的地区
</select>
</td>
</tr> </form>
<tr><td><a href="javascript:updown('possible','up')">up</a> 单选 <a href="javascript:updown('possible','down')">down</a></td><td>option移动</td><td><a href="javascript:updown('chosen','up')">up</a> 单选 <a href="javascript:updown('chosen','down')">down</a></td></tr>
</table>
</body>
</html>