大佬教程收集整理的这篇文章主要介绍了javascript实现通过拼音首字母快速选择下拉列表,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
<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<=4700
9) 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<=5297
9) return "W";
if(tmp>=52980 && tmp<=53688) return "X";
if(tmp>=53689 && tmp<=54480) return "Y";
if(tmp>=54481 && tmp<=6228
9) return "Z";
return c.charAt(0
);}
//
SELEct
Helper
SELEct
Helper = new function()
{ // 初始化
thi
s.init = function()
{ document.attachEvent("onkeypress",function()
{ var elm = event.srcElement;
if (el
m.tagName == "
SELECT"
&& el
m.className.indexOf("
SELEct
Helper") == -1)
{ el
m.className += "
SELEct
Helper";
el
m.attachEvent("onkeypress",
SELEct
Helper.getNextKeyItem
); el
m.fireEvent("onkeypress",event
); }
}
); }
// 获取选项文本的首字符
function getItemKeyChar(option)
{ return option.text.charAt(0).toUpperCase(
); }
// 查找并选中匹配的选项
thi
s.getNextKeyItem = function()
{ var elm = event.srcElement;
var index = el
m.SELEctedIndex + 1;
do
{ if (index == el
m.length) index = 0;
if (index == el
m.SELEctedInde
X) return
false; // 未找到匹配的选项,则退出
} while (key2Char(event.keyCod
E) != getPinYin(getItemKeyChar(el
m.options[index++]))
); el
m.SELEctedIndex = index - 1; // 选中匹配的选项
return
false; // 取消原有的选择功能
}
};
/
** * 返回键盘事件对应的字母或数字
* a-z: 97 -> 122
* A-Z: 65 -> 90
*
0-9: 48 -> 57
*/
function key2Char(key)
{ var s = "ABCDEFGHIJKLMNOPQR
stuVWXYZ";
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;
}
SELEct
Helper.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>
大佬总结
以上是大佬教程为你收集整理的javascript实现通过拼音首字母快速选择下拉列表全部内容,希望文章能够帮你解决javascript实现通过拼音首字母快速选择下拉列表所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。