当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript实现通过拼音首字母快速选择下拉列表

Javascript
javascript进行客户端数据的校验
javascript中如何实现浏览器上的右键菜单
用javascript使链接按钮不断变化
利用javascript制作倒计时牌
用javascript实现变色背景和文字
让弹出窗口变得“体贴”一些(javascript)
javascript实例教程(1) 创建弹出式窗口
javascript实例教程(2) 创建折叠式导航菜单
javascript实例教程(3) 探测浏览器插件
javascript实例教程(4) 探测浏览器插件
javascript实例教程(5) 在一个表单中设置和检查Cookies
javascript实例教程(6) 利用javascript进行密码保护
javascript实例教程(7) 利用javascript基于浏览器类型的重定向
javascript实例教程(8) 检验表单有效性
javascript实例教程(9) 随机显示图片
javascript实例教程(10) 创建后退按钮
javascript实例教程(11) 隐藏script代码
javascript实例教程(12) 鼠标移过时报警
javascript实例教程(13) 鼠标触发窗口
javascript实例教程(14) JS代替CGI

No. « 235 236 237 238 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-09-12   浏览: 296 ::
收藏到网摘: n/a

比如，某选项的拼音首字母为"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 全选 提示:你可先修改部分代码,再按运行]