您的位置：首页 > Web前端 > JavaScript

js实现列表框选项的删除，排序,俩列表框间的选项传递。

2007-11-14 18:33 351 查看

列表框选项的删除，排序。俩列表框间的选项传递。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>列表框选项删除，排序</title>
</HEAD>
<style>
*{font-size:12px;line-height:130%;}
body{background-color: #CCFFFF;}
</style>

<BODY>

歌曲编号：4,8,9,10,11,12,14<br>
<FORM METHOD=POST ACTION="" name="form1" onsubmit="sub()">

<TABLE>
<TR>
<TD>
<SELECT NAME="songs" id="songs" size=7>
<OPTION VALUE="4">fire fly</OPTION>
<OPTION VALUE="8">nothing in the world</OPTION>
<OPTION VALUE="9">whole again</OPTION>
<OPTION VALUE="10">who is it</OPTION>
<OPTION VALUE="11">勇敢的幸福</OPTION>
<OPTION VALUE="12">小小幸福</OPTION>
<OPTION VALUE="14">I need you vs. I need you</OPTION>
</SELECT>
</TD>
<TD>
<input type=button onclick="movetop()" value=↑><BR>
<input type=button onclick="moveout()" value=→><BR>
<input type=button onclick="movein()" value=←><BR> 
<input type=button onclick="movedown()" value=↓> 
</TD>
<TD>
<SELECT NAME="out" size=7>

<OPTION VALUE="">--</OPTION>
<OPTION VALUE="">--</OPTION>
<OPTION VALUE="">--</OPTION>
<OPTION VALUE="">--</OPTION>
<OPTION VALUE="">--</OPTION>
<OPTION VALUE="">--</OPTION>
<OPTION VALUE="">--</OPTION>
</SELECT>
</TD>
</TR>
</TABLE>

<INPUT TYPE="submit" value="提交"><BR>

</FORM>
<SCRIPT LANGUAGE="JavaScript">
s=document.getElementById("songs");
d=document.getElementById("out");

function movetop() //
{
now=s.selectedIndex;
if(s.selectedIndex>0){
now--;
var temp=s.options[s.selectedIndex].text;
s.options[s.selectedIndex].text=s.options[now].text;
s.options[now].text=temp;
var temp1=s.options[s.selectedIndex].value;
s.options[s.selectedIndex].value=s.options[now].value;
s.options[now].value=temp1;
s.selectedIndex--;
}
//window.alert(s.options[s.selectedIndex].value);
}
function movedown() //
{
now=s.selectedIndex;
if(s.selectedIndex<s.options.length){
now++;
var temp=s.options[s.selectedIndex].text;
s.options[s.selectedIndex].text=s.options[now].text;
s.options[now].text=temp;
var temp1=s.options[s.selectedIndex].value;
s.options[s.selectedIndex].value=s.options[now].value;
s.options[now].value=temp1;
s.selectedIndex++;
}
//window.alert(s.options[s.selectedIndex].value);
}
function moveout() //
{
now=s.selectedIndex;
var temp=0;
for(i=0;i<d.options.length;i++)
{
if(d.options[i].value!=""){temp=i+1;}
}
d.options[temp].text=s.options[now].text;
d.options[temp].value=s.options[now].value;
s.remove(now);

}

function movein() //
{
if(d.selectedIndex>=0&&d.options[d.selectedIndex].value!="")
{
now=d.selectedIndex;
var temp=0;

if(s.selectedIndex>=0)
{
temp=s.selectedIndex;
s.options[s.options.length]=new Option("","",true,true);
for(i=s.options.length-1;i>=temp+1;i--)
{
s.options[i].text=s.options[i-1].text;
s.options[i].value=s.options[i-1].value;
}
s.options[temp+1].text=d.options[now].text;
s.options[temp+1].value=d.options[now].value;
d.remove(now);
s.selectedIndex=temp+1;
}
else
{
temp=s.options.length;
s.options[s.options.length]=new Option("","",true,true);
s.options[temp].text=d.options[now].text;
s.options[temp].value=d.options[now].value;
d.remove(now);
}

}
}
function sub() //
{
ids="";
for(i=0;i<s.options.length;i++)
{
ids+=s.options[i].value+",";

}
ids=ids.substr(0,ids.length-1);
window.alert("歌曲编号："+ids);
}
</SCRIPT>
</BODY>
</HTML>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航