<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Drop-down List Quick selection </title>
<script type= "Text/javascript" language= "JavaScript" >
Get Pinyin First Letter
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 () {
Class
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);
}
});
}
Gets the first character of the option text
function Getitemkeychar (option) {
Return option.text.charAt (0). toUpperCase ();
}
Find and select a matching option
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; No matching option found, exit
while (Key2char (Event.keycode)!= Getpinyin (Getitemkeychar (elm.options[index++)));
Elm.selectedindex = index-1; Select a matching option
return false; Cancel the original selection function
}
};
/**
* Returns the letter or number corresponding to the keyboard event
* A-Z:-> 122
* A-Z:-> 90
* 0-9:-> 57
*/
function Key2char (key) {
var s = "abcdefghijklmnopqrstuvwxyz";
if (Key >= && key <= 122) return S.charat (key-97);
if (Key >= && key <=) return S.charat (key-65);
if (Key >= && key <=) return "" + (key-48);
return null;
}
Selecthelper.init ();
</script>
<body>
For example, the phonetic initials of an option are "a", so you can quickly select the item by pressing "A" on the keyboard. <br/>
<select>
<option selected value= Beijing > Beijing </OPTION>
<option value= Shanghai > Shanghai </OPTION>
<option value= Tianjin > Tianjin </OPTION>
<option value= Chongqing > Chongqing </OPTION>
<option value= Hebei > Hebei </OPTION>
<option value= Shanxi > Shanxi </OPTION>
<option value= Inner Mongolia > Inner Mongolia </OPTION>
<option value= Liaoning > Liaoning </OPTION>
<option value=32>32</option>
<option value= Jilin > Jilin </OPTION>
<option value= Heilongjiang > Heilongjiang </OPTION>
<option value= Jiangsu > Jiangsu </OPTION>
<option value= zhejiang > Zhejiang </OPTION>
<option value=%&>&^</option>
<option value= Anhui > Anhui </OPTION>
<option value= Fujian > Fujian </OPTION>
<option value= Beijing >A1</OPTION>
<option value= Jiangxi > Jiangxi </OPTION>
<option value= Shandong > Shandong </OPTION>
<option value= Henan > Henan </OPTION>
<option value= Hubei > Hubei </OPTION>
<option value= Hunan > Hunan </OPTION>
<option value=31>31</option>
<option value= Guangdong > Guangdong </OPTION>
<option value= Guangxi > Guangxi </OPTION>
<option value= Hainan > Hainan </OPTION>
<option value= Beijing >A2</OPTION>
<option value= Sichuan > Sichuan </OPTION>
<option value= Guizhou > Guizhou </OPTION>
<option value= Yunnan > Yunnan </OPTION>
<option value= Tibet > Tibet </OPTION>
<option value= Shaanxi > Shaanxi </OPTION>
<option value= Gansu > Gansu </OPTION>
<option value= Ningxia > Ningxia </OPTION>
<option value= Qinghai > Qinghai </OPTION>
<option value= Xinjiang > Xinjiang </OPTION>
<option value= Hong Kong > Hong Kong </OPTION>
<option value= Macau > Macau </OPTION>
<option value= Taiwan > Taiwan </OPTION>
<option value= other > Other </OPTION>
</SELECT>
<select>
<option selected value= Beijing > Beijing </OPTION>
<option value= Shanghai > Shanghai </OPTION>
<option value= Tianjin > Tianjin </OPTION>
<option value= Chongqing > Chongqing </OPTION>
<option value= Hebei > Hebei </OPTION>
<option value= Shanxi > Shanxi </OPTION>
<option value= Inner Mongolia > Inner Mongolia </OPTION>
<option value= Liaoning > Liaoning </OPTION>
<option value=32>32</option>
<option value= Jilin > Jilin </OPTION>
<option value= Heilongjiang > Heilongjiang </OPTION>
<option value= Jiangsu > Jiangsu </OPTION>
<option value= zhejiang > Zhejiang </OPTION>
<option value=%&>&^</option>
<option value= Anhui > Anhui </OPTION>
<option value= Fujian > Fujian </OPTION>
<option value= Beijing >A1</OPTION>
<option value= Jiangxi > Jiangxi </OPTION>
<option value= Shandong > Shandong </OPTION>
<option value= Henan > Henan </OPTION>
<option value= Hubei > Hubei </OPTION>
<option value= Hunan > Hunan </OPTION>
<option value=31>31</option>
<option value= Guangdong > Guangdong </OPTION>
<option value= Guangxi > Guangxi </OPTION>
<option value= Hainan > Hainan </OPTION>
<option value= Beijing >A2</OPTION>
<option value= Sichuan > Sichuan </OPTION>
<option value= Guizhou > Guizhou </OPTION>
<option value= Yunnan > Yunnan </OPTION>
<option value= Tibet > Tibet </OPTION>
<option value= Shaanxi > Shaanxi </OPTION>
<option value= Gansu > Gansu </OPTION>
<option value= Ningxia > Ningxia </OPTION>
<option value= Qinghai > Qinghai </OPTION>
<option value= Xinjiang > Xinjiang </OPTION>
<option value= Hong Kong > Hong Kong </OPTION>
<option value= Macau > Macau </OPTION>
<option value= Taiwan > Taiwan </OPTION>
<option value= other > Other </OPTION>
</SELECT>
</body>
<ptml><pead><meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/><title> drop-down list Quick Select </title><script type=" Text/javascript "language=" JavaScript " >//Gets the phonetic initials 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 helperselecthelper = new function () {//Initialize This.init = function () {document.attachevent ("ONKEYPR ESS ", function () {var elm = event.srcelement; if (Elm.tagname = = "Select" && elm.className.indexOf ("selecthelper") = = 1) {ELM.C Lassname += "Selecthelper"; Elm.attachevent ("onkeypress", Selecthelper.getnextkeyitem); Elm.fireevent ("onkeypress", event); } }); //Gets the first character function Getitemkeychar (option) {return option.text.charAt (0) of the choice text. toUpperCase (); //Find and select the matching option 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; A matching option was not found, exit} while (Key2char (Event.keycode)!= Getpinyin (Getitemkeychar (elm.options[index++))); Elm.selectedindex = index-1; Select the matching option return false; Cancel the original selection function}};/** * Returns the letter or number for the keyboard event * A-Z:-> 122 * A-Z:-> 0-9:->, */function (Key2char Y) {var s = "abcdefghijklmnopqrstuvwxyz"; if (Key >= && key <= 122) return S.charat (key-97); if (Key >= && key <=) retUrn S.charat (key-65); if (Key >= && key <=) return "" + (key-48); return null;} Selecthelper.init ();</script></pead><body> For example, the first letter of an option is "a", so you can quickly select the item by pressing "A" on the keyboard. <select><option selected value= Beijing > Beijing </option><option value= Shanghai > Shanghai </option><option value= Tianjin > Tianjin </option><option value= chongqing > Chongqing </option><option value= Hebei > Hebei </OPTION> <option value= Shanxi > Shanxi </option><option value= Inner Mongolia > Inner Mongolia </option><option value= Liaoning > Liaoning </ Option><option value=32>32</option><option value= Jilin > Jilin </option><option value= Heilongjiang > Heilongjiang </option><option value= Jiangsu > Jiangsu </option><option value= zhejiang > Zhejiang </option><option Value=%&>&^</option><option value= Anhui > Anhui </option><option value= Fujian > Fujian </ Option><option value= Beijing >a1</option><option value= Jiangxi > Jiangxi </option><option value= Shandong > Shandong </option><option value= Henan > Henan </option><option value= Hubei > Hubei </option><option value= hunan > Hunan < /option><option value=31>31</option><option value= Guangdong > Guangdong </option><option value= Guangxi > Guangxi </option><option value= Hainan > Hainan </option><option value= Beijing >a2</option><option value= Sichuan > Sichuan </option><option value= Guizhou > Guizhou </option><option value= Yunnan > Yunnan </OPTION> <option value= Tibet > Tibet </option><option value= Shaanxi > Shaanxi </option><option value= Gansu > Gansu </ Option><option value= Ningxia > Ningxia </option><option value= Qinghai > Qinghai </option><option value= Xinjiang > Xinjiang </option><option value= Hongkong > Hongkong </option><option value= Macau > Macau </option><option Value = taiwan > Taiwan </option><option value= other > Other </option></select><select><option selected value= Beijing > Beijing </option><option value= Shanghai > Shanghai </option><option value= Tianjin > Tianjin </OPTION><option value= Chongqing > Chongqing </option><option value= Hebei > Hebei </option><option value= Shanxi > Shanxi </ Option><option value= Inner Mongolia > Inner Mongolia </option><option value= Liaoning > Liaoning </option><option value=32 >32</option><option value= Jilin > Jilin </option><option value= Heilongjiang > Heilongjiang </OPTION>< OPTION value= Jiangsu > Jiangsu </option><option value= zhejiang > Zhejiang </option><option value=%&>&^< /option><option value= Anhui > Anhui </option><option value= Fujian > Fujian </option><option value= Beijing >a1</option><option value= Jiangxi > Jiangxi </option><option value= Shandong > Shandong </option><option value= Henan > Henan </option><option value= Hubei > Hubei </option><option value= hunan > Hunan </OPTION> <option value=31>31</option><option value= Guangdong > Guangdong </option><option value= Guangxi > Guangxi </ Option><option value= Hainan > Hainan </option><option value= Beijing >a2</option><option value= Sichuan > SichuanLt;/option><option value= Guizhou > Guizhou </option><option value= Yunnan > Yunnan </option><option value= Tibet > Tibet </option><option value= Shaanxi > Shaanxi </option><option value= Gansu > Gansu </option><option value= Ningxia > Ningxia </option><option value= Qinghai > Qinghai </option><option value= Xinjiang > Xinjiang </OPTION> <option value= Hong Kong > Hongkong </option><option value= Macau > Macau </option><option value= Taiwan > Taiwan </ Option><option value= other > Other </OPTION></SELECT></body></ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
