两个select多选控件中项的移动的相关操作代码,Asp.Net代码库,德仔网

代码语言

代码分类

【Asp.Net】两个select多选控件中项的移动的相关操作

作者:dezai / 发布于2014/7/2/ 398


	<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="&gt;&gt;" style="width: 40px">
	 
	 <input onClick="del(document.getElementById('b'))" type="button" value="Del" style="width: 40px">
	 
	 <input onClick="up(document.getElementById('b'))" type="button" value="b&uarr;" style="width: 40px">
	 
	 <input onClick="down(document.getElementById('b'))" type="button" value="b&darr;" 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　　多选控件　

同语言下

可能有用的

dezai贡献的其它代码(1065)