<!--
I'm too lazy...Even I didn't use any Chinese to describe.
~~~~~~~~~~~~~~~~~~~~~~~
The Select Element Test
~~~~~~~~~~~~~~~~~~~~~~~
This is a sample program to show you how to add,remove,change and move items in the select.
KangQiao.Graduate from LongQuan Middle School.
This is the first hyper text mark-up language page since the exam.
My E-Mail:[email protected]
My WebSite:http://hi.baidu.com/zunhuakq
8:19, June 30th, 2010.
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Select Element Test</title>
</head>
<body>
<p>
<select id="s" size="10" style="width: 800" multiple>
</select>
</p>
<p>
<input type="button" value="Add Music" onclick="javascript:addMusic();">
<input type="button" value="Delete Music" onclick="javascript:delMusic();">
<input type="button" value="Change Music" onclick="javascript:chgMusic();">
<input type="button" value="Move Up" onclick="javascript:mupMusic();">
<input type="button" value="Move Down" onclick="javascript:mdnMusic();">
</p>
<script>
var s=document.getElementById("s");
function addMusic()
{
var temp;
temp=window.prompt("Please enter the URL of the music:","");
if(temp!="" && temp!=null)
{
var opt=document.createElement("option");
s.add(opt);
opt.innerHTML=opt.value=temp;
}
else alert("You don't enter any music.");
return;
}
function delMusic()
{
var temp=0;
for(cnt=0;cnt<=s.options.length-1;cnt++)
{
if (s.options(cnt).selected)
{
temp=1;break;
}
}
if(temp==0 || !window.confirm("Are you sure to delete the selected music?")) return;
//pay attention to the operator || 's running order.
for(cnt=0;cnt<=s.options.length-1;cnt++)
{
if (s.options(cnt).selected)
{
s.remove(cnt);
cnt--;
}
}
}
function chgMusic()
{
for(cnt=0;cnt<=s.options.length-1;cnt++)
{
if (s.options(cnt).selected)
{
var temp=window.prompt("Now you can change the URL of the "+(cnt+1)+"th(st,nd,rd) piece of music",s(cnt).innerHTML);
if (temp!="" && temp!=null)
s(cnt).innerHTML=s(cnt).value=temp;
else alert("You don't enter any music.");
}
}
}
function ecgMusic(a,b)
{
/*if(a>=0 && a<=s.options.length-1 && b>=0 && b<=s.options.length-1) //sometimes we may not need.
{
*/
var temp;
temp=s(a).innerHTML;
s(a).innerHTML=s(a).value=s(b).innerHTML;
s(b).innerHTML=s(b).value=temp;
//}
}
function mupMusic()
{
for(cnt=0;cnt<=s.options.length-1;cnt++)
{
if (s.options(cnt).selected)
{
if (cnt!=0)
{
ecgMusic(cnt-1,cnt);
s.options(cnt).selected=false;
s.options(cnt-1).selected=true;
}
else break;
}
}
return;
}
function mdnMusic()
{
for(cnt=s.options.length-1;cnt>=0;cnt--)
{
if (s.options(cnt).selected)
{
if(cnt!=s.options.length-1)
{
ecgMusic(cnt,cnt+1);
s.options(cnt).selected=false;
s.options(cnt+1).selected=true;
}
else break;
}
}
}
</script>
</body>
</html>