zoukankan      html  css  js  c++  java
  • 根据键入字母自动匹配DropDownList中选项的拼音首字母

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     
    <head>
      
    <title></title>
      
    <meta http-equiv=Content-Type content="text/html;charset=UTF-8">
      
    <meta name="generator" content="editplus" />
     
    </head>
     
    <body>  
    <script type="text/vbscript">
    function   getpychar(char)   
      tmp
    =65536+asc(char)   
      
    if(tmp>=45217   and   tmp<=45252)   then   getpychar=   "A"   
      
    if(tmp>=45253   and   tmp<=45760)   then   getpychar=   "B"   
      
    if(tmp>=45761   and   tmp<=46317)   then   getpychar=   "C"   
      
    if(tmp>=46318   and   tmp<=46825)   then   getpychar=   "D"   
      
    if(tmp>=46826   and   tmp<=47009)   then   getpychar=   "E"   
      
    if(tmp>=47010   and   tmp<=47296)   then   getpychar=   "F"   
      
    if(tmp>=47297   and   tmp<=47613)   then   getpychar=   "G"   
      
    if(tmp>=47614   and   tmp<=48118)   then   getpychar=   "H"   
      
    if(tmp>=48119   and   tmp<=49061)   then   getpychar=   "J"   
      
    if(tmp>=49062   and   tmp<=49323)   then   getpychar=   "K"   
      
    if(tmp>=49324   and   tmp<=49895)   then   getpychar=   "L"   
      
    if(tmp>=49896   and   tmp<=50370)   then   getpychar=   "M"   
      
    if(tmp>=50371   and   tmp<=50613)   then   getpychar=   "N"   
      
    if(tmp>=50614   and   tmp<=50621)   then   getpychar=   "O"   
      
    if(tmp>=50622   and   tmp<=50905)   then   getpychar=   "P"   
      
    if(tmp>=50906   and   tmp<=51386)   then   getpychar=   "Q"   
      
    if(tmp>=51387   and   tmp<=51445)   then   getpychar=   "R"   
      
    if(tmp>=51446   and   tmp<=52217)   then   getpychar=   "S"   
      
    if(tmp>=52218   and   tmp<=52697)   then   getpychar=   "T"   
      
    if(tmp>=52698   and   tmp<=52979)   then   getpychar=   "W"   
      
    if(tmp>=52980   and   tmp<=53640)   then   getpychar=   "X"   
      
    if(tmp>=53689   and   tmp<=54480)   then   getpychar=   "Y"   
      
    if(tmp>=54481   and   tmp<=55289)   then   getpychar=   "Z"   
      end   
    function       
      
    function   getpy(str)  
      Dim i
      For i
    =1   to   len(str)   
      getpy
    =getpy&getpychar(mid(str,i,1))   
      next   
      end   
    function   
    </script>   
    <script type="text/javascript">
    <!--
    //Author: Don.cnblogs.com 
    //
    QQ:83458106
    var FilterDDL = function (ddlElement) {
        
    this.selectIndex=0;
        
    this.ddl=ddlElement;        this.letters=["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];
        
    //初始化
        this.init=function(){        
            
    for(i=0;i<this.ddl.options.length;i++)
            
    {
                
    var optionText =this.ddl.options[i].innerText;
                
    var py= getpy(optionText.length>0 ? optionText.substring(0,1):"");
                
    if(!py)py="";
                
    this.ddl.options[i].py= py;
            }

            
    this.ddl.onkeydown=this.keydown;
        }
    ;
        
    //接收按键事件
        this.keydown=function(){            
            
    var object = arguments.callee.object;
            
    var changed=false;
            
    if(event.keyCode<=90 && event.keyCode>=65//键入字母
            {    
                
    var keyLetter = object.letters[event.keyCode-65];
                
    var startIndex= keyLetter == object.ddl.options[object.ddl.selectedIndex].py ? object.ddl.selectedIndex+1 : 0//找到开始位置
                for(i=0;i<object.ddl.options.length;i++)  //遍历options
                {
                    
    var index=i+startIndex; //当前偏移量
                    if(index>=object.ddl.options.length) //如果超过总长度
                        index=index-object.ddl.options.length; //从头开始
                    if(object.ddl.options[index].py == keyLetter)
                    
    {    
                        object.ddl.options[index].selected
    =true;
                        
    break;
                    }

                }

            }
            
        }
    ;
        
    this.keydown.object = this;
    }

    //-->
    </script><br />
    <select id="ddlCity" >
    <option value=""></option>
    <option value="">北京</option><option value="">天津</option><option value="">上海</option><option value="">重庆</option><option value="">石家庄市</option><option value="">唐山市</option><option value="">秦皇岛市</option><option value="">邯郸市</option><option value="">邢台市</option><option value="">保定市</option><option value="">张家口市</option><option value="">承德市</option><option value="">廊坊市</option><option value="">衡水市</option><option value="">沧州市</option><option value="">沈阳市</option><option value="">大连市</option><option value="">鞍山市</option><option value="">抚顺市</option><option value="">本溪市</option><option value="">丹东市</option><option value="">锦州市</option><option value="">葫芦岛市</option><option value="">营口市</option><option value="">盘锦市</option><option value="">阜新市</option><option value="">辽阳市</option><option value="">铁岭市</option><option value="">朝阳市</option><option value="">哈尔滨市</option><option value="">齐齐哈尔市</option><option value="">鹤岗市</option><option value="">双鸭山市</option><option value="">鸡西市</option><option value="">大庆市</option><option value="">伊春市</option><option value="">牡丹江市</option><option value="">佳木斯市</option><option value="">七台河市</option><option value="">黑河市</option><option value="">绥化市</option><option value="">大兴安岭地区</option><option value="">长春市</option><option value="">吉林市</option><option value="">四平市</option><option value="">辽源市</option><option value="">通化市</option><option value="">白山市</option><option value="">延边州</option><option value="">白城市</option><option value="">松原市</option><option value="">济南市青岛市</option><option value="">淄博市</option><option value="">枣庄市</option><option value="">东营市</option><option value="">潍坊市</option><option value="">烟台市</option><option value="">威海市</option><option value="">济宁市</option><option value="">泰安市</option><option value="">日照市</option><option value="">莱芜市</option><option value="">临沂市</option><option value="">德州市</option><option value="">太原市</option><option value="">大同市</option><option value="">阳泉市</option><option value="">长治市</option><option value="">晋城市</option><option value="">朔州市</option><option value="">晋中市</option><option value="">运城市</option><option value="">忻州市</option><option value="">临汾市</option><option value="">吕梁地区</option><option value="">合肥市</option><option value="">芜湖市</option><option value="">蚌埠市</option><option value="">淮南市</option><option value="">马鞍山市</option><option value="">淮北市</option><option value="">铜陵市</option><option value="">安庆市</option><option value="">黄山市</option><option value="">滁州市</option><option value="">阜阳市</option><option value="">宿州市</option><option value="">巢湖市</option><option value="">六安市</option><option value="">亳州市</option><option value="">池州市</option><option value="">宣城市</option><option value="">杭州市</option><option value="">宁波市</option><option value="">温州市</option><option value="">嘉兴市</option><option value="">湖州市</option><option value="">绍兴市</option><option value="">金华市</option><option value="">衢州市</option><option value="">舟山市</option><option value="">台州市</option><option value="">丽水市</option><option value="">南京市</option><option value="">徐州市</option><option value="">连云港市</option><option value="">淮安市</option><option value="">宿迁市</option><option value="">盐城市</option><option value="">扬州市</option><option value="">泰州市</option><option value="">南通市</option><option value="">镇江市</option><option value="">常州市</option><option value="">无锡市</option><option value="">苏州市</option><option value="">南昌市</option><option value="">景德镇市</option><option value="">萍乡市</option><option value="">九江市</option><option value="">新余市</option><option value="">鹰潭市</option><option value="">赣州市</option><option value="">吉安市</option><option value="">宜春市</option><option value="">抚州市</option><option value="">上饶市</option><option value="">广州市</option><option value="">深圳市</option><option value="">珠海市</option><option value="">汕头市</option><option value="">韶关市</option><option value="">惠州市</option><option value="">河源市</option><option value="">梅州市</option><option value="">汕尾市</option><option value="">东莞市</option><option value="">中山市</option><option value="">江门市</option><option value="">佛山市</option><option value="">阳江市</option><option value="">湛江市</option><option value="">茂名市</option><option value="">肇庆市</option><option value="">清远市</option><option value="">潮州市</option><option value="">揭阳市</option><option value="">云浮市</option><option value="">福州市</option><option value="">厦门市</option><option value="">三明市</option><option value="">莆田市</option><option value="">泉州市</option><option value="">漳州市</option><option value="">南平市</option><option value="">龙岩市</option><option value="">宁德市</option><option value="">海口市</option><option value="">三亚市</option><option value="">琼山市</option><option value="">文昌市</option><option value="">琼海市</option><option value="">万宁市</option><option value="">五指山市</option><option value="">东方市</option><option value="">儋州市</option><option value="">临高县</option><option value="">澄迈县</option><option value="">定安县</option><option value="">屯昌县</option><option value="">昌江县</option><option value="">白沙县</option><option value="">琼中县</option><option value="">陵水县</option><option value="">保亭县</option><option value="">乐东县</option><option value="">郑州市</option><option value="">开封市</option><option value="">洛阳市</option><option value="">平顶山市</option><option value="">焦作市</option><option value="">鹤壁市</option><option value="">新乡市</option><option value="">安阳市</option><option value="">濮阳市</option><option value="">许昌市</option><option value="">漯河市</option><option value="">三门峡市</option><option value="">南阳市</option><option value="">商丘市</option><option value="">信阳市</option><option value="">周口市</option><option value="">驻马店市</option><option value="">济源市</option><option value="">武汉市</option><option value="">黄石市</option><option value="">襄樊市</option><option value="">十堰市</option><option value="">荆州市</option><option value="">宜昌市</option><option value="">荆门市</option><option value="">鄂州市</option><option value="">孝感市</option><option value="">黄冈市</option><option value="">咸宁市</option><option value="">随州市</option><option value="">恩施州</option><option value="">仙桃市</option><option value="">天门市</option><option value="">潜江市</option><option value="">神农架林区</option><option value="">长沙市</option><option value="">株洲市</option><option value="">湘潭市</option><option value="">衡阳市</option><option value="">邵阳市</option><option value="">岳阳市</option><option value="">常德市</option><option value="">张家界市</option><option value="">益阳市</option><option value="">郴州市</option><option value="">永州市</option><option value="">怀化市</option><option value="">娄底市</option><option value="">湘西州</option><option value="">成都市</option><option value="">自贡市</option><option value="">攀枝花市</option><option value="">泸州市</option><option value="">德阳市</option><option value="">绵阳市</option><option value="">广元市</option><option value="">遂宁市</option><option value="">内江市</option><option value="">乐山市</option><option value="">南充市</option><option value="">宜宾市</option><option value="">广安市</option><option value="">达州市</option><option value="">眉山市</option><option value="">雅安市</option><option value="">巴中市</option><option value="">资阳市</option><option value="">阿坝州</option><option value="">甘孜州</option><option value="">凉山州</option><option value="">昆明市</option><option value="">曲靖市</option><option value="">玉溪市</option><option value="">保山市</option><option value="">昭通市</option><option value="">思茅地区</option><option value="">临沧地区</option><option value="">丽江地区</option><option value="">文山州</option><option value="">红河州</option><option value="">西双版纳州</option><option value="">楚雄州</option><option value="">大理州</option><option value="">德宏州</option><option value="">怒江州</option><option value="">迪庆州</option><option value="">贵阳市</option><option value="">六盘水市</option><option value="">遵义市</option><option value="">安顺市</option><option value="">铜仁地区</option><option value="">毕节地区</option><option value="">黔西南州</option><option value="">黔东南州</option><option value="">黔南州</option><option value="">西安市</option><option value="">铜川市</option><option value="">宝鸡市</option><option value="">咸阳市</option><option value="">渭南市</option><option value="">延安市</option><option value="">汉中市</option><option value="">榆林市</option><option value="">安康市</option><option value="">商洛市</option><option value="">兰州市</option><option value="">金昌市</option><option value="">白银市</option><option value="">天水市</option><option value="">嘉峪关市</option><option value="">武威市</option><option value="">张掖市</option><option value="">平凉市</option><option value="">酒泉市</option><option value="">庆阳市</option><option value="">定西地区</option><option value="">陇南地区</option><option value="">甘南州</option><option value="">临夏回族自治州</option><option value="">西宁市</option><option value="">海东地区</option><option value="">海北州</option><option value="">海南州</option><option value="">果洛州</option><option value="">玉树州</option><option value="">海西州</option><option value="">银川市</option><option value="">石嘴山市</option><option value="">吴忠市</option><option value="">固原市</option><option value="">呼和浩特市</option><option value="">包头市</option><option value="">乌海市</option><option value="">赤峰市</option><option value="">通辽市</option><option value="">鄂尔多斯市</option><option value="">呼伦贝尔市</option><option value="">乌兰察布盟</option><option value="">锡林郭勒盟</option><option value="">巴彦淖尔盟</option><option value="">阿拉善盟</option><option value="">兴安盟</option><option value="">南宁市</option><option value="">柳州市</option><option value="">桂林市</option><option value="">梧州市</option><option value="">北海市</option><option value="">防城港市</option><option value="">钦州市</option><option value="">贵港市</option><option value="">玉林市</option><option value="">百色市</option><option value="">贺州市</option><option value="">河池市</option><option value="">来宾市</option><option value="">崇左市</option><option value="">拉萨市</option><option value="">那曲地区</option><option value="">昌都地区</option><option value="">山南地区</option><option value="">日喀则地区</option><option value="">阿里地区</option><option value="">林芝地区</option><option value="">乌鲁木齐市</option><option value="">克拉玛依市</option><option value="">石河子市</option><option value="">阿拉尔市</option><option value="">图木舒克市</option><option value="">五家渠市</option><option value="">吐鲁番地区</option><option value="">哈密地区</option><option value="">和田地区</option><option value="">阿克苏地区</option><option value="">喀什地区</option><option value="">克孜勒苏州</option><option value="">巴音郭楞州</option><option value="">昌吉州</option><option value="">博尔塔拉州</option><option value="">伊犁州</option><option value="">塔城地区</option><option value="">阿勒泰州</option><option value="">九龙城区</option><option value="">观塘区</option><option value="">深水埗区</option><option value="">黄大仙区</option><option value="">湾仔区</option><option value="">油尖旺区</option><option value="">离岛区</option><option value="">葵青区</option><option value="">西贡区</option><option value="">沙田区</option><option value="">屯门区</option><option value="">大埔区</option><option value="">荃湾区</option><option value="">元朗区</option><option value="">澳门</option><option value="">台北市</option><option value="">高雄市</option><option value="">基隆市</option><option value="">台中市</option><option value="">台南市</option><option value="">新竹市</option><option value="">嘉义市</option><option value="">北县</option><option value="">板桥市</option><option value="">宜兰县</option><option value="">宜兰市</option><option value="">桃园县</option><option value="">桃园市</option><option value="">新竹县</option><option value="">竹北市</option><option value="">苗栗县</option><option value="">苗栗市</option><option value="">台中县</option><option value="">丰原市</option><option value="">彰化县</option><option value="">彰化市</option><option value="">南投县</option><option value="">南投市</option><option value="">云林县</option><option value="">斗六市</option><option value="">嘉义县</option><option value="">太保市</option><option value="">台南县</option><option value="">新营市</option><option value="">高雄县</option><option value="">凤山市</option><option value="">屏东县</option><option value="">屏东市</option><option value="">澎湖县</option><option value="">马东市</option><option value="">台东县</option><option value="">台东市</option><option value="">花莲县</option><option value="">花莲市</option><option value="">金门县</option><option value="">连江县</option>
    </select>
    <script type="text/javascript">
    <!--
        
    var ddlCity = document.getElementById("ddlCity");
        
    var ddl1=new FilterDDL(ddlCity);
        ddl1.init();
    //-->
    </script>
     
    </body>
    </html>
  • 相关阅读:
    linux signal之初学篇
    Eclipse 每次打开workspace目录记录位置?
    [Clojure] A Room-Escape game, playing with telnet and pure-text commands
    孔雀翎----《Programming C# 》中国版 文章4版
    js一些编写的函数
    KVM,QEMU核心分析
    apche commons项目简介
    java基础—网络编程———建立聊天的形式
    学习算法
    css+html+js实现多级下拉和弹出菜单
  • 原文地址:https://www.cnblogs.com/Don/p/880366.html
Copyright © 2011-2022 走看看