JS: 排序代码
作者：黑马
思路：用JS改变下拉框（select）中的option的text值以模拟项目上移或下移效果，接着通过JS读取下拉框全部option的text值，然后把排序后的结果赋值给一个隐藏属性的input容器，提交后直接读取该input的text。
核心代码：
<table border="0" align="center"><tr><td>
<form name="web" method="post">
<table width="500" border="0"><tr><td width="65%" align="right">
<select id="sList" size="6" style="border:0px;width:200px;">
<option value="0" selected>-- 2007年 --</option>
<option value="1" >-- 2008年 --</option>
<option value="2" >-- 2009年 --</option>
<option value="3" >-- 2010年 --</option>
<option value="4" >-- 2011年 --</option>
<option value="5" >-- 2012年 --</option>
</select>
</td><td>
<p><input id="down" type="button" value=" 下移↓ " name="btndown" onclick=javascript:godown()></p>
<p><input id="up" type="button" value=" 上移↑ " name="btnup" onclick=javascript:goup()></p>
</td></tr></table>
<input type="hidden" name="tHide">
<p align="center"><input type="button" value=" 保存 " name="bnt1" onclick="javascript:alert('重新排序后的信息:＼n＼n' + document.web.tHide.value + '' )"></p>
</form></td></tr></table>
<script language="javascript">
function godown() {
var SL=document.getElementById('sList');
var i=SL.selectedIndex;
str=SL.options[i].text;
k=i+1;
if (k>=SL.length-1) k=SL.length-1;
SL.options[i].text=SL.options[k].text;
SL.options[k].text=str;
SL.options[k].selected=true;
changetxt();
}
function goup() {
var SL=document.getElementById('sList');
var i=SL.selectedIndex;
str=SL.options[i].text;
k=i-1;
if (k<=0) k=0;
SL.options[i].text = SL.options[k].text;
SL.options[k].text=str;
SL.options[k].selected=true;
changetxt();
}
function changetxt() {
var txtstr="";
var SL=document.getElementById('sList');
for(i=0;i<SL.options.length;i++) {
txtstr += SL.options[i].text + "＼r＼n";
}
document.web.tHide.value = txtstr;
}
</script>
asp或php读取select只能读到被选择的那一项的值，对排序结果并不能罗列出来，使用上述方法则可以直接从隐藏属性的input容器中得到全部内容。
效果演示 >> 我要瞧瞧
【 文章来源 本站原创[2008.2.21] 转载请注明出处与作者等信息 】
网 |
更新日期：2008年04月19日 