1. 首页
  2. 编程与技术

javascript实现通过拼音首字母快速选择下拉列表

发布于 2016-12-12 06:18:47 | 191 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Javascript教程，程序狗速度看过来！

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。

比如，某选项的拼音首字母为"a",只要按下键盘上的"a"，就可以快速选择该项。 如何解决重音字 和兼容ff. ff下怎呢得到asc呢，忘高手指教
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>下拉列表快速选择</title>


<script type="text/javascript" language="JavaScript">
// 获取拼音首字母
function getPinYin(c) {
    execScript("tmp=asc(\""+c+"\")", "vbscript");
    tmp = 65536 + tmp;
    if(tmp>=45217 && tmp<=45252) return "A";
    if(tmp>=45253 && tmp<=45760) return "B";
    if(tmp>=45761 && tmp<=46317) return "C";
    if(tmp>=46318 && tmp<=46825) return "D";
    if(tmp>=46826 && tmp<=47009) return "E";
    if(tmp>=47010 && tmp<=47296) return "F";
    if((tmp>=47297 && tmp<=47613) || (tmp == 63193)) return "G";
    if(tmp>=47614 && tmp<=48118) return "H";
    if(tmp>=48119 && tmp<=49061) return "J";
    if(tmp>=49062 && tmp<=49323) return "K";
    if(tmp>=49324 && tmp<=49895) return "L";
    if(tmp>=49896 && tmp<=50370) return "M";
    if(tmp>=50371 && tmp<=50613) return "N";
    if(tmp>=50614 && tmp<=50621) return "O";
    if(tmp>=50622 && tmp<=50905) return "P";
    if(tmp>=50906 && tmp<=51386) return "Q";
    if(tmp>=51387 && tmp<=51445) return "R";
    if(tmp>=51446 && tmp<=52217) return "S";
    if(tmp>=52218 && tmp<=52697) return "T";
    if(tmp>=52698 && tmp<=52979) return "W";
    if(tmp>=52980 && tmp<=53688) return "X";
    if(tmp>=53689 && tmp<=54480) return "Y";
    if(tmp>=54481 && tmp<=62289) return "Z";
    return c.charAt(0);
}

// select helper
SelectHelper = new function() {
// 初始化
this.init = function() {
document.attachEvent("onkeypress", function() {
var elm = event.srcElement;
if (elm.tagName == "SELECT"
&& elm.className.indexOf("SelectHelper") == -1) {
elm.className += "SelectHelper";
elm.attachEvent("onkeypress", SelectHelper.getNextKeyItem);
elm.fireEvent("onkeypress", event);
}
});
}
// 获取选项文本的首字符
function getItemKeyChar(option) {
return option.text.charAt(0).toUpperCase();
}
// 查找并选中匹配的选项
this.getNextKeyItem = function() {
var elm = event.srcElement;
var index = elm.selectedIndex + 1;
do {
if (index == elm.length) index = 0;
if (index == elm.selectedIndex) return false; // 未找到匹配的选项，则退出
} while (key2Char(event.keyCode) != getPinYin(getItemKeyChar(elm.options[index++])));
elm.selectedIndex = index - 1; // 选中匹配的选项
return false; // 取消原有的选择功能
}
};
/**
* 返回键盘事件对应的字母或数字
* a-z: 97 -> 122
* A-Z: 65 -> 90
* 0-9: 48 -> 57
*/
function key2Char(key) {
var s = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
if (key >= 97 && key <= 122) return s.charAt(key - 97);
if (key >= 65 && key <= 90) return s.charAt(key - 65);
if (key >= 48 && key <= 57) return "" + (key - 48);
return null;
}
SelectHelper.init();
</script>
</head>
<body>
比如，某选项的拼音首字母为"a",只要按下键盘上的"a"，就可以快速选择该项。<br />
<select>
<OPTION selected value=北京>北京</OPTION>
<OPTION value=上海>上海</OPTION>
<OPTION value=天津>天津</OPTION>
<OPTION value=重庆>重庆</OPTION>
<OPTION value=河北>河北</OPTION>
<OPTION value=山西>山西</OPTION>
<OPTION value=内蒙古>内蒙古</OPTION>
<OPTION value=辽宁>辽宁</OPTION>
<OPTION value=32>32</OPTION>
<OPTION value=吉林>吉林</OPTION>
<OPTION value=黑龙江>黑龙江</OPTION>
<OPTION value=江苏>江苏</OPTION>
<OPTION value=浙江>浙江</OPTION>
<OPTION value=%&>&^</OPTION>
<OPTION value=安徽>安徽</OPTION>
<OPTION value=福建>福建</OPTION>
<OPTION value=北京>A1</OPTION>
<OPTION value=江西>江西</OPTION>
<OPTION value=山东>山东</OPTION>
<OPTION value=河南>河南</OPTION>
<OPTION value=湖北>湖北</OPTION>
<OPTION value=湖南>湖南</OPTION>
<OPTION value=31>31</OPTION>
<OPTION value=广东>广东</OPTION>
<OPTION value=广西>广西</OPTION>
<OPTION value=海南>海南</OPTION>
<OPTION value=北京>A2</OPTION>
<OPTION value=四川>四川</OPTION>
<OPTION value=贵州>贵州</OPTION>
<OPTION value=云南>云南</OPTION>
<OPTION value=西藏>西藏</OPTION>
<OPTION value=陕西>陕西</OPTION>
<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>
<select>
<OPTION selected value=北京>北京</OPTION>
<OPTION value=上海>上海</OPTION>
<OPTION value=天津>天津</OPTION>
<OPTION value=重庆>重庆</OPTION>
<OPTION value=河北>河北</OPTION>
<OPTION value=山西>山西</OPTION>
<OPTION value=内蒙古>内蒙古</OPTION>
<OPTION value=辽宁>辽宁</OPTION>
<OPTION value=32>32</OPTION>
<OPTION value=吉林>吉林</OPTION>
<OPTION value=黑龙江>黑龙江</OPTION>
<OPTION value=江苏>江苏</OPTION>
<OPTION value=浙江>浙江</OPTION>
<OPTION value=%&>&^</OPTION>
<OPTION value=安徽>安徽</OPTION>
<OPTION value=福建>福建</OPTION>
<OPTION value=北京>A1</OPTION>
<OPTION value=江西>江西</OPTION>
<OPTION value=山东>山东</OPTION>
<OPTION value=河南>河南</OPTION>
<OPTION value=湖北>湖北</OPTION>
<OPTION value=湖南>湖南</OPTION>
<OPTION value=31>31</OPTION>
<OPTION value=广东>广东</OPTION>
<OPTION value=广西>广西</OPTION>
<OPTION value=海南>海南</OPTION>
<OPTION value=北京>A2</OPTION>
<OPTION value=四川>四川</OPTION>
<OPTION value=贵州>贵州</OPTION>
<OPTION value=云南>云南</OPTION>
<OPTION value=西藏>西藏</OPTION>
<OPTION value=陕西>陕西</OPTION>
<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>
</body>
</html>

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]



最新网友评论  共有(0)条评论 发布评论 返回顶部
推荐阅读
  • 终极炫富——2016 年 iOS 开发者收入调查报告
  • 年度大片：Stack Overflow 2017 开发者调查报告发布！
  • 开发者需要大学学位吗？
  • 程序员多大年纪算高龄，届时该何去何从？
  • 2017 年高薪编程语言排行榜，你的语言上榜没？
  • 各编程语言开发者最常使用的按键，中了没?
  • 伤不起的三十岁，干不动的程序员要何去何从？
  • 2016年中国加班最狠IT公司排行
  • 一句话"面试"漫画：黑了苹果、谷歌、三星
  • 拿代码量算 KPI ……跟程序员们来这套？
  • 程序员遇到 Bug 时的 30 个反应，你是哪一种？
  • 2016年收入最高的5个编程语言 Java和C没在前五?
  • 为什么很少见人傻钱多的程序员炫富？
  • 阿里月薪两万是什么体验？
  • 代码缩进时 程序员更喜欢空格键还是Tab键？
    • 最新资讯
  • Python获取系统所有进程PID及进程名称的方法示例
  • Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
  • Python实现的根据IP地址计算子网掩码位数功能示例
  • 好的Python培训机构应该具备哪些条件
  • 详解Pytorch 使用Pytorch拟合多项式(多项式回归)
  • Python加载带有注释的Json文件实例
  • 对python的文件内注释 help注释方法
  • Python实现判断一行代码是否为注释的方法
  • Oracle数据库表中字段顺序的修改方法
  • ASP.NET MVC 4使用PagedList.Mvc分页的实现代码
  • Oracle实例启动时报错：ORA-32004的解决方法
  • 解读ASP.NET 5 & MVC6系列教程（7）：依赖注入
  • 详解IDEA用maven创建springMVC项目和配置
  • ASP.NET MVC5网站开发之展示层架构（五）
  • SpringBoot创建maven多模块项目实战代码
    • 后端技术
    前端技术
    数据库
    热门框架
    常用IDE
    其他
    Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务