网站制作学习网JS脚本→正文:js 操作option上下,左右移动
字体:

js 操作option上下,左右移动

JS脚本 2009/7/28 10:22:10  点击:不统计

关键词: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>

·上一篇:正则表达式定位点 >>    ·下一篇:拖动翻页效果 >>
推荐文章
最新文章