<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Select下拉列表框进行多选、移除、交换内容</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body style="font-size:12px">
<script language=javascript>
function selectMove(oSource,oTarget,cWhich) //两个选择框选项之间的移动，oSource为源选择框，oTarget为目标选择框，cWhich为提示文字，取值”左“或”右“。
{
if(!oSource.options.length)
{
alert(cWhich+"侧列表中已没有选项可选，无法移动！");
return;
}
if(oSource.selectedIndex==-1)
{
alert("操作前您首先应该从"+cWhich+"侧列表中选择一项！");
return;
}
var mySld=new Array();
for(i=0;i<oSource.options.length;i++)
if(oSource.options[i].selected)
mySld[mySld.length++]=i;
for(i=0;i<mySld.length;i++)
{
oTarget.options.length++;
oTarget.options[oTarget.options.length-1].text=oSource.options[mySld[i]].text;
oTarget.options[oTarget.options.length-1].value=oSource.options[mySld[i]].value;
}
for(i=0;i<mySld.length;i++)
{
for(j=mySld[i]-i;j<oSource.options.length-1;j++)
{
oSource.options[j].text=oSource.options[j+1].text;
oSource.options[j].value=oSource.options[j+1].value;
}
oSource.options.length--;
}
}
function moveAll(oSource,oTarget)
{
var n=oTarget.options.length;
oTarget.options.length=n+oSource.options.length;
for(i=n;i<oTarget.options.length;i++)
{
oTarget.options[i].text=oSource.options[i-n].text;
oTarget.options[i].value=oSource.options[i-n].text.value;
}
oSource.options.length=0;
}
</script>
<form name=form1>
<table class=setrole_tab>
<tr>
<td>
未加入角色<br>
<select size=15 style="width:150px;" name=notadded_role ondblclick="selectMove(document.form1.notadded_role,document.form1.added_role,'左')" multiple>
<option>aaaaaaaa</option>
<option>bbbbbbbb</option>
<option>cccccccc</option>
<option>dddddddd</option>
</select>
</td>
<td>
<a href="javascript:moveAll(document.form1.notadded_role,document.form1.added_role);">全部右移</a><br>
<a href="javascript:selectMove(document.form1.notadded_role,document.form1.added_role,'左')">右移</a><br>
<a href="javascript:selectMove(document.form1.added_role,document.form1.notadded_role,'右')">左移</a><br>
<a href="javascript:moveAll(document.form1.added_role,document.form1.notadded_role);">全部左移</a>
</td>
<td>
已加入角色<br>
<select size=15 style="width:150px;" name=added_role ondblclick="selectMove(document.form1.added_role,document.form1.notadded_role,'右')" multiple>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
分享到：
相关推荐
jquery.selectbox.js select下拉菜单美化代码 jquery.selectbox.js select下拉菜单美化代码 jquery.selectbox.js select下拉菜单美化代码
js select框美化用input文本框模拟select框美化特效，鼠标点击input框弹出选择二级菜单点击取值特效。
js select框美化用input文本框模拟select框美化 js select框美化用input文本框模拟select框美化 js select框美化用input文本框模拟select框美化 js select框美化用input文本框模拟select框美化
原生js select下拉选项框给文本框赋值代码 原生js select下拉选项框给文本框赋值代码 原生js select下拉选项框给文本框赋值代码 原生js select下拉选项框给文本框赋值代码
js select省市区三级联动菜单代码
js select多级联动效果，无限分级~！
JS模拟select下拉菜单
Js操作Select大全(取值、设置选中等等) Js操作Select大全(取值、设置选中等等)
JS select 标签 可多选可单选。需要加载CSS和JS，DOME包含，前提需要加载JQ
js select框美化插件制作多种风格的select美化列表框特效，U-Box 风格select框、Mac 风格select框、TM2008 风格select框等。内含js代码下载。
js操作select控件大全 js操作select控件大全 js操作select控件大全 js操作select控件大全 js操作select控件大全 js操作select控件大全
select2.min.js插件！！！=
图标 文字类型的Js下拉菜单，有点苹果风格的菜单，当鼠标放在图标上的时候，还可以通过点击鼠标来选择菜单，可以看成是一个select下拉菜单列表的功能。
基于jQuery美化的JS Select下拉列表菜单，官方已封装成了现成的插件，鼠标点击下拉菜单的向下箭头后，有感动的滚动效果，用jQuery制作下拉框，很是方便，希望大家喜欢。
js 操作select 下拉框js 操作select 下拉框
本人写的一个html页面，用js实现从数组读数据自动生成select控件
JQ JS javascript 多选 多选下拉框 select bootstrap-select
用于更好的展示和进行搜索，使用select2搜索框，使你的搜索更加简单
Js实现两个Select标签中的选项之间的移动