<head>
<meta http-equiv="Content-Type" content="text/html; char
=utf-8" /><title>下拉列表快速选择</title>
<script type="text/javascript" language="JavaScript">
// 获取拼音首字母
function getPinYin(c) {
execScript("tmp=asc(\""+c+"\")", "vbscript");
tmp = 65536 + tmp;
(tmp>=45217 && tmp<=45252) 
"A";(tmp>=45253 && tmp<=45760) "B";(tmp>=45761 && tmp<=46317) "C";(tmp>=46318 && tmp<=46825) "D";(tmp>=46826 && tmp<=47009) "E";(tmp>=47010 && tmp<=47296) "F";((tmp>=47297 && tmp<=47613) || (tmp 
63193)) "G";(tmp>=47614 && tmp<=48118) "H";(tmp>=48119 && tmp<=49061) "J";(tmp>=49062 && tmp<=49323) "K";(tmp>=49324 && tmp<=49895) "L";(tmp>=49896 && tmp<=50370) "M";(tmp>=50371 && tmp<=50613) "N";(tmp>=50614 && tmp<=50621) "O";(tmp>=50622 && tmp<=50905) "P";(tmp>=50906 && tmp<=51386) "Q";(tmp>=51387 && tmp<=51445) "R";(tmp>=51446 && tmp<=52217) "S";(tmp>=52218 && tmp<=52697) "T";(tmp>=52698 && tmp<=52979) "W";(tmp>=52980 && tmp<=53688) "X";(tmp>=53689 && tmp<=54480) "Y";(tmp>=54481 && tmp<=62289) "Z"; c.charAt(0);}
// select helper
SelectHelper =
function
{//
化this.init = function
{document.attachEvent("onkeypress", function
{var elm = event.srcElement;
(elm.tagName "SELECT" && elm.
Name.indexOf("SelectHelper") -1) {elm.
Name 
"SelectHelper";elm.attachEvent("onkeypress", SelectHelper.getNextKeyItem);
elm.fireEvent("onkeypress", event);
}
});
}
// 获取选项文本
首
function getItemKeyChar(option) {
option.text.charAt(0).toUpperCase;}
// 查找并选中匹配
选项this.getNextKeyItem = function
{var elm = event.srcElement;
var index = elm.selectedIndex + 1;
do {
(index elm.length) index = 0; (index elm.selectedIndex) false; // 未找到匹配选项
则退出} while (key2Char(event.keyCode) != getPinYin(getItemKeyChar(elm.options[index
])));elm.selectedIndex = index - 1; // 选中匹配
选项 false; // 取消原有选择功能}
};
/**
* 返回键盘事件对应
字母或数字* a-z: 97 -> 122
* A-Z: 65 -> 90
* 0-9: 48 -> 57
*/
function key2Char(key) {
var s = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
(key >= 97 && key <= 122) s.charAt(key - 97); (key >= 65 && key <= 90) s.charAt(key - 65); (key >= 48 && key <= 57) "" + (key - 48); 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= 4川> 4川</OPTION>
<OPTION value=贵州>贵州</OPTION>
<OPTION value=云南>云南</OPTION>
<OPTION value=西藏>西藏</OPTION>
<OPTION value=陕西>陕西</OPTION>
<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= 4川> 4川</OPTION>
<OPTION value=贵州>贵州</OPTION>
<OPTION value=云南>云南</OPTION>
<OPTION value=西藏>西藏</OPTION>
<OPTION value=陕西>陕西</OPTION>
<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 全选 提示:你可先修改部分代码,再按运行]
最新评论