两个select多选控件中项的移动的相关操作
来源:互联网 发布:php求数组中的最大值 编辑:程序博客网 时间:2024/05/01 22:17
效果:
代码:
<html>
<head>
<title></title>
<script language="javascript">
function Add(objA,objB)
{
var tem=new Array();
with(objA)
for(i=length-1;i>=0;i--)
if(options[i].selected){tem[tem.length]=new Option(options[i].text,options[i].value);}
if(objA.selectedIndex>-1)
{
for(i=0;i<objB.length;i++) tem[tem.length]=objB.options[i];
with(objB)
{
length=0;
tem.sort(sortArr);
for(i=0;i<tem.length;i++) options[length]=new Option(tem[i].text,tem[i].value)
}
}
}
function sortArr(a,b)
{
if(a.text>b.text)return 1;
if(a.text<b.text)return -1;
return 0;
}
//
//
function up(obj)
{
var objO = new Option(obj.options[obj.selectedIndex].text,obj.options[obj.selectedIndex].value);
var selectedIndex = obj.selectedIndex;
if(selectedIndex>0)
{
obj.options[selectedIndex].text = obj.options[selectedIndex-1].text;
obj.options[selectedIndex].value = obj.options[selectedIndex-1].value;
obj.options[selectedIndex-1].text = objO.text;
obj.options[selectedIndex-1].value = objO.value;
obj.selectedIndex = selectedIndex-1;
}
}
//
//
function down(obj)
{
var objO = new Option(obj.options[obj.selectedIndex].text,obj.options[obj.selectedIndex].value);
var selectedIndex = obj.selectedIndex;
if(selectedIndex<obj.options.length-1)
{
obj.options[selectedIndex].text = obj.options[selectedIndex+1].text;
obj.options[selectedIndex].value = obj.options[selectedIndex+1].value;
obj.options[selectedIndex+1].text = objO.text;
obj.options[selectedIndex+1].value = objO.value;
obj.selectedIndex = selectedIndex+1;
}
}
//
// 双击时添加到b
function dba(objA,objB)
{
var objO=new Option(objA.options[objA.selectedIndex].text,objA.options[objA.selectedIndex].value)
objB.add(objO);
}
//
// 双击时删除b
function dbb(obj)
{
obj.removeChild(obj.options[obj.selectedIndex]);
}
//
// 删除b中选中的项
function del(obj)
{
for(var i=obj.options.length-1;i>=0;i--)
{
if(obj.options[i].selected)
{
obj.removeChild(obj.options[i]);
}
}
}
//
//
function getvalue(obj)
{
var str="";
for(var i=0;i<obj.options.length;i++)
{
if(str.length>0)
str = str + "," + obj.options[i].value;
else
str = obj.options[i].value;
}
document.getElementById("selectValue").innerText = str;
}
//
</script>
</head>
<body bgcolor="#CCCCCC">
<table cellspacing="0" cellpadding="0" width="448" border="0">
<tr>
<td width="45%" align="center">
<select style="width: 155px" multiple size="15" name="a" ondblclick="dba(this,document.getElementById('b'))">
<option value="av1" title="av1">at1</option>
<option value="av2" title="av2" style="background-color:#999999">at2</option>
<option value="av3" title="av3">at3</option>
<option value="av4" title="av4">at4</option>
<option value="av5" title="av5">at5</option>
<option value="av6" title="av6">at6</option>
<option value="av7" title="av7">at7</option>
</select>
</td>
<td>
<input onClick="Add(document.getElementById('a'),document.getElementById('b'))" type="button"
value=">>" style="width: 40px">
<br>
<input onClick="del(document.getElementById('b'))" type="button" value="Del" style="width: 40px">
<br>
<input onClick="up(document.getElementById('b'))" type="button" value="b↑" style="width: 40px">
<br>
<input onClick="down(document.getElementById('b'))" type="button" value="b↓" style="width: 40px">
</td>
<td width="45%" align="center">
<select style="width: 155px" multiple size="15" name="b" ondblclick="dbb(this)">
<option value="bv1">bt1</option>
<option value="bv2">bt2</option>
<option value="bv3">bt3</option>
<option value="bv4">bt4</option>
<option value="bv5">bt5</option>
<option value="bv6">bt6</option>
<option value="bv7">bt7</option>
<option value="bv8">bt8</option>
</select>
</td>
</tr>
<tr>
<td colspan="3" align="center">
<input type="button" name="button1" value="获得右边select值" onClick="getvalue(document.getElementById('b'))"></td>
</tr>
<tr>
<td colspan="3" align="center">
<div id="selectValue">
</div>
</td>
</tr>
</table>
</body>
</html>
- 两个select多选控件中项的移动的相关操作
- Jquery 两个select多选控件中项的移动的相关操作
- select控件的相关操作
- JQuery select控件的相关操作
- JQuery select控件的相关操作
- JQuery select控件的相关操作收集
- JQuery select控件的相关操作
- js 两个select之间的左右移动
- jquery select 的相关操作
- JavaScript 对两个select 元素进行操作,移动其中的选项
- javascript 中关于select 的应用和相关操作
- javascript两个select控件内容互相移动
- jquery对select的相关操作说明
- jquery处理select的相关操作
- 两个select的数据移动,支持IE,ff,google浏览器
- 两个 下拉列表框 Select 的 Option 互相移动
- 两个多选框(select)之间值的左右上下移动
- 两个多选框(select)之间值的左右上下移动
- 有关于android上传文件问题
- php tutorial include and requre
- Auto CAD的相关问题·绘图单位
- data service
- php tutorial Constant,Variables and data types
- 两个select多选控件中项的移动的相关操作
- Android中的Intent详细讲解
- php tutorial operator
- php tutorial statement
- 登陆过滤器
- Linux C编程--线程操作3--线程属性解析
- STM32单片机的BOOT0和BOOT1应用原理
- android_bug_momeny_print_call_stack
- Java基础班第四天笔记