当前位置:萝卜系统下载站 > 技术开发教程 > 详细页面

(排序,连选,跳选多项Option)下拉下文框1下拉下文框(改进版)

(排序,连选,跳选多项Option)下拉下文框1下拉下文框(改进版)

更新时间:2021-11-16 文章作者:未知 信息来源:网络 阅读次数:

说明: 是 上 一 回 程 式 的 改 进 版!
本程式支持排序,Shift和Ctrl功能!(即:连选和跳选多项Option)
可以任意的相互操作(下拉列表框1<=>下拉列表框2)!

如果多维数组复杂,可以自己写一个排序函数!
Javascript中Sort()所传的参数为数组的俩个RECORD(我的定义),默认按
字符排序。
排序所传的参数也为一个数组,例数组A 为下所示:
a[0][0]=1;
a[0][1]=2;
a[0][2]=3;
a[0][3]=4;

a[1][0]=1;
a[1][1]=2;
a[1][2]=3;
a[1][3]=4;

a[2][0]=1;
a[2][1]=2;
a[2][2]=3;
a[2][3]=4;
每次所传的参数为下:
a[0]={1,2,3,4}
a[1]={1,2,3,4}

。。。。。。。
那么自己根据要求就可以对传来的参数数组(实际为数组中的RECORD)
中的某一个FIELD进行排序!

select.htm
<html>
<head>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<link rel="stylesheet" href="common.css">
</head>
<body bgColor=skyblue>
<form action="select.htm" method="post" name="myform">
<br><br><br>
<div align="center"><center><left>
<table style="FONT-SIZE: smaller">
<tr><td>
 <table>
 <tr><td>
 <select name="left_select" style="HEIGHT: 200px; WIDTH: 100px" multiple>
 <OPTION VALUE="A">A</OPTION><OPTION VALUE="B">B</OPTION>
 <OPTION VALUE="C">C</OPTION><OPTION VALUE="D">D</OPTION>
 <OPTION VALUE="E">E</OPTION><OPTION VALUE="F">F</OPTION>
 <OPTION VALUE="G">G</OPTION><OPTION VALUE="H">H</OPTION>
 <OPTION VALUE="I">I</OPTION><OPTION VALUE="J">J</OPTION>
 <OPTION VALUE="K">K</OPTION><OPTION VALUE="L">L</OPTION>
 <OPTION VALUE="M">M</OPTION><OPTION VALUE="N">N</OPTION>
 <OPTION VALUE="O">O</OPTION><OPTION VALUE="P">P</OPTION>
 </select>
 </td></tr>
 
 </td><td>
 <table border="0">
 
 <br>
 <tr><td>
 <INPUT language="javascript" name="btn_select_addany" onclick="fun_select_addany(document.myform)" style="COLOR: blue; FONT-FAMILY: Webdings; FONT-SIZE: 12pt; FONT-WEIGHT: normal; HEIGHT: 28px; WIDTH: 27px" title="Add any" type=button value="8"></td></tr><tr><td>
 <INPUT language="javascript" name="btn_select_addall" onclick="fun_select_addall(document.myform)" style="COLOR: blue; FONT-FAMILY: Webdings; FONT-SIZE: 12pt; FONT-WEIGHT: normal; HEIGHT: 28px; WIDTH: 27px" title="Add all" type=button value=: DESIGNTIMESP="17713"></td></tr><tr><td>
 <br><br></td></tr><tr><td>
 <INPUT language="javascript" name="btn_select_dltany" onclick="fun_select_dltany(document.myform)" style="COLOR: blue; FONT-FAMILY: Webdings; FONT-SIZE: 12pt; FONT-WEIGHT: normal; HEIGHT: 28px; WIDTH: 27px" title ="delete any" type=button value="7"></td></tr><tr><td>
 <INPUT language="javascript" name="btn_select_dltall" onclick="fun_select_dltall(document.myform)" style="COLOR: blue; FONT-FAMILY: Webdings; FONT-SIZE: 12pt; FONT-WEIGHT: normal; HEIGHT: 28px; WIDTH: 27px" title ="delete all" type=button value="9"></td></tr>
 <tr><td></td></tr>
 <tr><td>
 </td></tr>
 </TD><td> 
 <table style="FONT-SIZE: smaller">
 <tr><td>
 <select name="right_select" style="HEIGHT: 200px; WIDTH: 100px" multiple>
 </select>
 </td></tr>
 
 </td></TR></TBODY></TABLE></div></CENTER>
</form> 
</body>
</html>

<script language="javascript">
function fun_select_addany(theform){
var i;
for (i=0;i<theform.left_select.length;i++){
if (theform.left_select.options[i].selected == true){
 theform.right_select.options[theform.right_select.length]=new Option(theform.left_select.options[i].text);
 theform.left_select.options.remove(i);
 i--;
}
}
sort_select(document.myform);
}

function fun_select_addall(theform){
var i; 
for (i=0;i<theform.left_select.length;i++){
theform.right_select.options[theform.right_select.length]=new Option(theform.left_select.options[i].text);
}
theform.left_select.length=0; 
sort_select(document.myform);
}

function fun_select_dltany(theform){
 var i;
 for (i=0;i<theform.right_select.length;i++){
 if (theform.right_select.options[i].selected == true){
theform.left_select.options[theform.left_select.length]=new Option(theform.right_select.options[i].text);
theform.right_select.options[i] =new Option("");
theform.right_select.options.remove(i);
i--;
 }
 }
 sort_select(document.myform);
}

function fun_select_dltall(theform){
var i; 
for (i=0;i<theform.right_select.length;i++){
theform.left_select.options[theform.left_select.length]=new Option(theform.right_select.options[i].text);
}
theform.right_select.length=0;
sort_select(document.myform);
}


function sort_select(theform){
var i;
var left_array= new Array();
var right_array = new Array();
for (i=0;i<theform.left_select.length;i++){
left_array[i] = new Array(theform.left_select.options[i].text);
}
for (i=0;i<theform.right_select.length;i++){
right_array[i] = new Array(theform.right_select.options[i].text);
}
left_array.sort();
right_array.sort();
theform.left_select.length=0;
theform.right_select.length=0;

for (i=0;i<left_array.length;i++){
theform.left_select.options[theform.left_select.length]=new Option(left_array[i]);
}
for (i=0;i<right_array.length;i++){
theform.right_select.options[theform.right_select.length]=new Option(right_array[i]);
}
left_array= new Array();
right_array = new Array();

</script>

温馨提示:喜欢本站的话,请收藏一下本站!

本类教程下载

系统下载排行

网站地图xml | 网站地图html