87,988
社区成员
发帖
与我相关
我的任务
分享用JavsScript能做出带下拉单的多重选择框,并把选择项移至另一个列表框吗
就是这样子:
╭════════╮ ╭════════╮
║ＸＸＸ部门1 ║ ║姓名１ ║
║ 姓名１ ║ >> ║姓名 2 ║
║ 姓名 2 ║ ║姓名 6 ║
║ 姓名 3 ║ ║ ║
║ＸＸＸ部门2 ║ << ║ ║
║ 姓名 4 ║ ║ ║
║ 姓名 5 ║ ║ ║
║ＸＸＸ部门3 ║ ║ ║
║ 姓名 6 ║ ║ ║
╰════════╯ ╰════════╯
如能用双击选择更好,能拖动就更好了,再不然就用">>"和"<<"了.
╭════════╮ ╭════════╮
║ＸＸＸ部门1 ║ ║姓名１ ║
║ 姓名１ ║ >> ║姓名 2 ║
║ 姓名 2 ║ ║姓名 6 ║
║ 姓名 3 ║ ║ ║
║ＸＸＸ部门2 ║ << ║ ║
║ 姓名 4 ║ ║ ║
║ 姓名 5 ║ ║ ║
║ＸＸＸ部门3 ║ ║ ║
║ 姓名 6 ║ ║ ║
╰════════╯ ╰════════╯
如能用双击选择更好,能拖动就更好了,再不然就用">>"和"<<"了.
...全文
请发表友善的回复…
发表回复
JK_10000 2004-03-03
- 打赏
- 举报
选择Option左右移动，以及手工排序(20030408):
http://jkisjk.vip.sina.com/html/moveRightOrLeft.htm
http://jkisjk.vip.sina.com/html/moveRightOrLeft.htm
gjd111686 2004-03-03
- 打赏
- 举报
<body>
<script language="JavaScript">
<!--
/*move(s1,s2,flag):s1是源列表框，s2是目的列表框，flag是是否全部移动*/
function move(s1,s2,flag){
var tem=new Array();
var sa=document.frm.elements[s1];
var sb=document.frm.elements[s2];
var s=sa.selectedIndex>-1?1:0
with(sa)
for(i=length-1;i>=0;i--)
if(options[i].selected||flag){tem[tem.length]=options[i];options[i]=null}
if(s||flag){
for(i=0;i<sb.length;i++)tem[tem.length]=sb.options[i]
with(sb){
length=0;
tem.sort(sortArr)
for(i=0;i<tem.length;i++)options[length]=new Option(tem[i].text,tem[i].value)
}
}
}
/*move_self(s,flag):s是列表框name,flag(1,-1)，是上移或下移*/
function move_self(s,flag){
var sa=document.frm.elements[s]
var tem;
with(sa){
if(flag==1){
if(selectedIndex>0)
for(i=0;i<length;i++)
if(options[i].selected){
tem_text=options[i].text;tem_value=options[i].value
options[i].text=options[i-1].text;
options[i].value=options[i-1].value;
options[i-1].text=tem_text;options[i-1].value=tem_value
options[i-1].selected=true;options[i].selected=false
}
}
else
for(i=length-1;i>=0;i--)
if(options[i].selected){
if(i==length-1)break;
tem_text=options[i].text;tem_value=options[i].value
options[i].text=options[i+1].text;
options[i].value=options[i+1].value;
options[i+1].text=tem_text;options[i+1].value=tem_value
options[i+1].selected=true;options[i].selected=false
}
}
}
/*显示列表框选中的值,s是列表框的name*/
function show(s){
var str=""
with(document.frm.elements[s])
for(i=0;i<length;i++)
if(options[i].selected)str+="\n第"+(i+1)+"个option:\ntext:"+options[i].text+" value:"+options[i].value
alert(str)
}
function sortArr(a,b){
if(a.text>b.text)return 1
if(a.text<b.text)return -1
return 0
}
//-->
</script>
<form name="frm">
<select name="a" size="5" style="width:100" multiple>
<option value="a1">1</option>
<option value="a2">2</option>
<option value="a3">3</option>
<option value="a4">4</option>
</select>
<input type=button value=">>" onclick="move('a','b',1)">
<input type=button value=" > " onclick="move('a','b')">
<input type=button value=" < " onclick="move('b','a')">
<input type=button value="<<" onclick="move('b','a',1)">
<select name="b" size="5" style="width:100" multiple>
<option value="b1">a</option>
<option value="b2">b</option>
<option value="b3">c</option>
<option value="b4">d</option>
<option value="b5">e</option>
</select><br/>
<input type=button value="up" onclick="move_self('a',1)">
<input type=button value="down" onclick="move_self('a',-1)">
<input type=button value="up" onclick="move_self('b',1)">
<input type=button value="down" onclick="move_self('b',-1)">
<input type=button value="get a's value" onclick="show('a')">
<input type=button value="get b's value" onclick="show('b')">
</form>
</body>
<script language="JavaScript">
<!--
/*move(s1,s2,flag):s1是源列表框，s2是目的列表框，flag是是否全部移动*/
function move(s1,s2,flag){
var tem=new Array();
var sa=document.frm.elements[s1];
var sb=document.frm.elements[s2];
var s=sa.selectedIndex>-1?1:0
with(sa)
for(i=length-1;i>=0;i--)
if(options[i].selected||flag){tem[tem.length]=options[i];options[i]=null}
if(s||flag){
for(i=0;i<sb.length;i++)tem[tem.length]=sb.options[i]
with(sb){
length=0;
tem.sort(sortArr)
for(i=0;i<tem.length;i++)options[length]=new Option(tem[i].text,tem[i].value)
}
}
}
/*move_self(s,flag):s是列表框name,flag(1,-1)，是上移或下移*/
function move_self(s,flag){
var sa=document.frm.elements[s]
var tem;
with(sa){
if(flag==1){
if(selectedIndex>0)
for(i=0;i<length;i++)
if(options[i].selected){
tem_text=options[i].text;tem_value=options[i].value
options[i].text=options[i-1].text;
options[i].value=options[i-1].value;
options[i-1].text=tem_text;options[i-1].value=tem_value
options[i-1].selected=true;options[i].selected=false
}
}
else
for(i=length-1;i>=0;i--)
if(options[i].selected){
if(i==length-1)break;
tem_text=options[i].text;tem_value=options[i].value
options[i].text=options[i+1].text;
options[i].value=options[i+1].value;
options[i+1].text=tem_text;options[i+1].value=tem_value
options[i+1].selected=true;options[i].selected=false
}
}
}
/*显示列表框选中的值,s是列表框的name*/
function show(s){
var str=""
with(document.frm.elements[s])
for(i=0;i<length;i++)
if(options[i].selected)str+="\n第"+(i+1)+"个option:\ntext:"+options[i].text+" value:"+options[i].value
alert(str)
}
function sortArr(a,b){
if(a.text>b.text)return 1
if(a.text<b.text)return -1
return 0
}
//-->
</script>
<form name="frm">
<select name="a" size="5" style="width:100" multiple>
<option value="a1">1</option>
<option value="a2">2</option>
<option value="a3">3</option>
<option value="a4">4</option>
</select>
<input type=button value=">>" onclick="move('a','b',1)">
<input type=button value=" > " onclick="move('a','b')">
<input type=button value=" < " onclick="move('b','a')">
<input type=button value="<<" onclick="move('b','a',1)">
<select name="b" size="5" style="width:100" multiple>
<option value="b1">a</option>
<option value="b2">b</option>
<option value="b3">c</option>
<option value="b4">d</option>
<option value="b5">e</option>
</select><br/>
<input type=button value="up" onclick="move_self('a',1)">
<input type=button value="down" onclick="move_self('a',-1)">
<input type=button value="up" onclick="move_self('b',1)">
<input type=button value="down" onclick="move_self('b',-1)">
<input type=button value="get a's value" onclick="show('a')">
<input type=button value="get b's value" onclick="show('b')">
</form>
</body>
lxzhi 2004-03-03
- 打赏
- 举报
我也试过,确实不好做哦,我也想做
QQgenie 2003-10-30
- 打赏
- 举报
左列表还要支持下拉菜单的,不好做哦
zhfkiller 2003-10-30
- 打赏
- 举报
当然可以做了
将左边的select的value放到右边
将左边的select的value放到右边
