自动对select表单列表进行排序

转载 2006年06月22日 15:27:00
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
>
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< title > runcode </ title >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< meta  name ="Author"  content ="Sheneyan"   />
< script  type ="text/javascript" >
function  s(n){
  
var  o = document.getElementById(n);
  
if  ( ! o) return ;
  
var  t = [],tt = o.options;
  
while  (tt.length > 0 ){
    t[t.length]
= tt[ 0 ].text;
    tt.remove(
0 );
  }
  t.sort();
  
for  ( var  i = 0 ,c;c = t[i];i ++ ){
    tt.add(
new  Option(c));
  }
}
</ script >
</ head >
< body  onload ="s('abc')" >
< select  id ="abc" >
< option > 华硕 </ option >
< option > .NET  </ option >
< option > 360 安全卫士 </ option >
< option > ACDSee </ option >
< option > Adobe </ option >
< option > Firewall </ option >
< option > Alcohol 120% </ option >
< option > AMD </ option >
< option > AnyDVD </ option >
< option > Apple </ option >
< option > ATi </ option >
< option > AutoDesk </ option >
< option > 罗技 </ option >
< option > BitComet </ option >
< option > BitSpirit(比特精灵) </ option >
< option > BlackIce </ option >
< option > BlueTooth </ option >
< option > Cisco  </ option >
< option > CloneCD </ option >
< option > CloneDVD </ option >
< option > CS-半条命 </ option >
< option > CuteFTP </ option >
< option > 千千静听 </ option >
< option > 趋势科技(PC-cillin) </ option >
< option > DAEMON Tools </ option >
< option > DELL </ option >
< option > DirectX </ option >
< option > DivX </ option >
< option > DreamMail </ option >
< option > PowerDVD </ option >
< option > Easy CD-DA </ option >
< option > 瑞星(Rising) </ option >
< option > Editplus </ option >
< option > EmEditor </ option >
< option > eMule </ option >
< option > eMule Plus </ option >
< option > FeedDemon </ option >
< option > FileZilla </ option >
< option > FlashFXP </ option >
< option > Flashget </ option >
< option > foobar2000 </ option >
< option > Foxit PDF Reader </ option >
< option > Foxmail </ option >
< option > FreeBSD </ option >
< option > FTPRush </ option >
< option > Gmail </ option >
< option > Google talk </ option >
< option > Google </ option >
< option > GoogleToolbar </ option >
< option > GoSURF </ option >
< option > GreenBrowser </ option >
< option > HP </ option >
< option > HyperSnap-DX </ option >
< option > IBM </ option >
< option > ICQ </ option >
< option > iMac G5 </ option >
< option > Intel </ option >
< option > Internet Explorer </ option >
< option > IPB </ option >
< option > iTune </ option >
< option > 腾讯 </ option >
< option > 微软 </ option >
< option > 木马克星(iparmor) </ option >
< option > 天网防火墙 </ option >
< option > 木马捆绑克星 </ option >
< option > 风云防火墙个人版 </ option >
< option > 卡巴斯基(Kaspersky) </ option >
< option > Maxthon 傲游 </ option >
< option > Media Player Classic </ option >
< option > Windows Media Player </ option >
< option > Windows Live Messenger </ option >
< option > Microsoft AntiSpyware </ option >
< option > Microsoft Office </ option >
< option > Mozilla FireFox </ option >
< option > Mozilla ThunderBird </ option >
< option > MySQL </ option >
< option > Nero </ option >
< option > NetCaptor </ option >
< option > Nettransport </ option >
< option > nVIDIA nForce </ option >
< option > 鱼鱼桌面秀 </ option >
< option > Opera </ option >
< option > PHP </ option >
< option > QQ病毒专杀工具 </ option >
< option > QuickTime </ option >
< option > RealPlayer </ option >
< option > skype </ option >
< option > SQL Server 2005 </ option >
< option > stylexp </ option >
< option > TheWorld Browser </ option >
< option > TuneUp Utilities </ option >
< option > UltraEdit </ option >
< option > UltraISO </ option >
< option > Winamp </ option >
< option > Windows OneCare </ option >
< option > Windows优化王 </ option >
< option > Windows优化大师 </ option >
< option > WinDVD </ option >
< option > WinRAR </ option >
< option > WinZip </ option >
< option > XnView </ option >
< option > Zonealarm </ option >
< option > Zoom Player </ option >
< option > 超级兔子 </ option >
< option > 风雷影音 </ option >
< option > 急速启动 HurryRun </ option >
</ select >
</ body >
</ html >
主要有以下几点总结:
1,select控件本身支持字母索引。比如select控件处于焦点中的时候,按B键,option中相应的以B开头的选项就会显示出来。

2,
var t=[],tt=o.options;
  
while (tt.length>0){
    t[t.length]
=tt[0].text;
    tt.remove(
0);
  }

这段代码写的较好,但一开始没有理解,
这段代码的作用是一项一项赋值select空间列表内容赋给另一个数组。
首先定义数组t=[](这种定义方法偶还是头次见到,孤陋寡闻了);用于存储原select控件列表内容。
tt=o.options;读取select空间内容,以数组形式存储在tt数组中。
t[t.length]=tt[0].text;这里时一个技巧,因为t.length总是比当前t的最大索引大1,所以这样写数组t可以自动增加空间。tt[0].text这里每次都读取第一个内容,然后用tt.remove(0);删除第一项内容,直至读取完毕。

3,
t.sort();
  for (var i=0,c;c=t[i];i++){
    tt.add(
new Option(c));
  }这段代码对新数组内容按字母派讯,然后写入原select空间列表。

Html form <select>下拉列表菜单与跳转菜单表单标签篇

一、Form select语法与结构:   -   TOP select name=""> option value="0">DIVCSS5option> option value="1">DIVC...

DOM,href,书签,表格,列表,按钮,框架,表单,自动刷新,link,label简单操作

一、DOM简介 document.getElementById(str)得到Id为str的HTML标签的对象.(DOM对象:Document Object Model文档对象模型) 整个HTML是...

使用Django的ModelForm对表单进行自动验证(可自定义验证规则)

有一用户咨询信息的表单, 我们对其填入的信息进行验证通过ModelForm可以直接验证用户键入是否符合model的设计, 但是model设计只能验证手机号码的长度, 无法验证手机号码是否合法. 这...

select与option:实现表单对应显示和对应显隐

一、表单对应显示 部分效果图: 代码实现:定义方法,通过if判断语句分项显示        表单对应显示                    $(function(){...
  • cypakoo
  • cypakoo
  • 2012年01月10日 11:45
  • 600

【关注前端】仿select表单

  • 2014年09月16日 15:06
  • 4KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:自动对select表单列表进行排序
举报原因:
原因补充:

(最多只允许输入30个字)