js控制文本框内容选项排序显示-网页编程网

当前位置：主页 >> 网页特效 >> 正文

js控制文本框内容选项排序显示

阅读：3902 输入：2016-11-10 09:21:37

<html>
<head>
<title>js控制排序</title>
<script>
var x=null;
var listObj=null;
//鼠标按下不放时的操作
function setTimeStart(type){
listObj=document.getElementById('forder');
//超过0.3秒启动连续的向上(下)的操作
if(type=="up"){
x=setTimeout(upListItem,300);
}else{
x=setTimeout(downListItem,300);
}
}
//将选中item向上
function upListItem(){
var selIndex=listObj.selectedIndex;
if(selIndex<0){
if(x!=null){clearTimeout(x);}
return;
}
if(selIndex==0){
if(x!=null){clearTimeout(x);}
return;
}
var selValue=listObj.options[selIndex].value;
var selText=listObj.options[selIndex].text;
listObj.options[selIndex].value=listObj.options[selIndex-1].value;
listObj.options[selIndex].text=listObj.options[selIndex-1].text;
listObj.options[selIndex-1].value=selValue;
listObj.options[selIndex-1].text=selText;
listObj.selectedIndex=selIndex-1;
if(selIndex+1>0){
x=setTimeout(upListItem,200);
}
}
//将选中item向下
function downListItem(){
var selIndex=listObj.selectedIndex;
if(selIndex<0){
if(x!=null){clearTimeout(x);}
return;
}
if(selIndex==listObj.options.length-1){
if(x!=null){clearTimeout(x);}
return;
}
var selValue=listObj.options[selIndex].value;
var selText=listObj.options[selIndex].text;
listObj.options[selIndex].value=listObj.options[selIndex+1].value;
listObj.options[selIndex].text=listObj.options[selIndex+1].text;
listObj.options[selIndex+1].value=selValue;
listObj.options[selIndex+1].text=selText;
listObj.selectedIndex=selIndex+1;
if(selIndex+1<listObj.options.length-1){
x=setTimeout(downListItem,200)
}
}
</script>
</head>
<body topMargin="20px" leftMargin="10px" rightMargin="0">
<TABLE id="Table1" height="100%" cellSpacing="0" cellPadding="0" width="100%" border="0">
<TR>
<TD vAlign="top">
<TABLE id="Table4" cellSpacing="0" cellPadding="0" width="100%" border="0">
<TR>
<TD><INPUT class="upBtn" type="button" value="向上↑" onmousedown="setTimeStart('up');" onmouseup="clearTimeout(x);"
onclick="listObj=document.getElementById('forder');upListItem();clearTimeout(x);" ID="Button1" NAME="Button1"> <INPUT style="WIDTH: 48px; HEIGHT: 22px" type="button" value="↓向下" class="downBtn" onmousedown="setTimeStart('down');"
onmouseup="clearTimeout(x);" onclick="listObj=document.getElementById('forder');downListItem();clearTimeout(x);" ID="Button2" NAME="Button2">
</TD>
</TR>
<TR>
<TD>
<SELECT id="forder" style="WIDTH: 304px; HEIGHT: 240px" size="15">
<OPTION value=1>你是一只狗一号信息</OPTION>
<OPTION value=2>你是一只狗二号信息</OPTION>
<OPTION value=3>你是一只狗三号信息</OPTION>
<OPTION value=4>你是一只狗四号信息</OPTION>
<OPTION value=5>你是一只狗五号信息</OPTION>
<OPTION value=6>你是一只狗六号信息</OPTION>
<OPTION value=7>你是一只狗七号信息</OPTION>
<OPTION value=8>你是一只狗八号信息</OPTION>
<OPTION value=9>你是一只狗九号信息</OPTION>
</SELECT></TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</body>
</html>

上一篇：js实现可编辑的下拉框可在线编辑效果
下一篇：js实现文字颜色定时闪烁显示特效

相关阅读: js鼠标感应标题文字动态放大显示特效; 链接文字定时变色显示特效; jq实现左右无缝轮播图代码