javascript实现通过拼音首字母快速选择下拉列表
程序员文章站
2023-12-29 08:03:28
<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需刷新才能执行]
<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需刷新才能执行]