<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>下拉列表快速选择</title>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" language="JavaScript">
// 获取首字母
function getPinYin(city)
{
var para = "key="+city;
new Ajax.Updater( 'div_info','pinyin.aspx', {method: 'get', parameters: para});
var key = $A(document.getElementById("div_info").innerHTML)[0];
return key;
}
function getNextKeyItem(eventTag)
{
var event = eventTag||window.event;
var currentKey = eventTag.charCode||eventTag.keyCode;
var eventSource =eventTag.target||window.event.srcElement;
var key = String.fromCharCode(currentKey).toUpperCase();
var elm = eventSource;
var index = elm.selectedIndex + 1;
do
{
if (index == elm.length)
index = 0; // 如果为最后一项，重新指定到第一项
if (index == elm.selectedIndex)
return false; // 未找到匹配的选项，则退出
var city = elm.options[index++].value;
}while(getPinYin(city) != key)
elm.selectedIndex = index - 1; // 选中匹配的选项
}
</script>
</head>
<body onkeypress="getNextKeyItem(event)">
比如，某选项的拼音首字母为"a",只要按下键盘上的"a"，就可以快速选择该项。dd<br />
<select id="sel1" >
<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=北京>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>
<div id="div_info" ></div>
<div id="div1" ></div>
<input type="button" />
</body>
</html>
根据键盘输入，下拉框自动定位
4星 · 超过85%的资源 需积分: 15 32 浏览量
2008-07-08
16:59:29
上传
评论
收藏 31KB ZIP 举报 
SelectAutoLocation.zip （5个子文件） 
SelectAutoLocation 
pinyin.aspx.cs 2KB pinyin.aspx 218B web.config 2KB js prototype.js 125KB HTMLPage.htm 3KB资源评论
yiyi06082013-08-08不灵活，要大量修改，才能共自己使用，所以放弃了
laban532013-10-09一般般，要修改
